CSS中的border-radius属性允许你将一个元素的外边缘的角变圆。通过这个属性，可以根据所需的形状将所有的角或只是选定的角磨圆。

CSS语法

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

语法表明，border-radius属性可以采用特定的测量值作为输入，也可以从父元素中继承测量值。Initial是用来设置默认值的。

指定的测量值可以是长度或百分比。它是指从角到边的长度。弧线的中心将位于它们的交点处。如果被设计的形状有一个椭圆的角，长度用斜线（/）分开。这样，中心将是主轴和小轴的交点。默认情况下，半径为0。

nextflicks--1-

元素的形状根据提供的值的数量而变化。

一个值将适用于元素的每个角。每个角都会有相同的半径。

<html>
<head>
    <style>
        div{
            width: 200px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50px;    
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

输出：

Capture2

如果有两个值，第一个值将应用于左上角和右下角，第二个值将应用于右上角和左下角。

<html>
<head>
    <style>
        div{
            width: 200px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50px 100px;    
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

输出：

Capture3

如果提供三个值，第一个值被设置为左上角，第二个值被设置为右上角和左下角，第三个值被应用于右下角。

<html>
<head>
    <style>
        div{
            width: 200px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50px 100px 10px;    
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

输出：

Capture4

提供四个值来分别指定每个角的半径。第一个值设置在左上角，第二个值设置在右上角，第三个值设置在右下角，最后一个值设置在左下角。

<html>
<head>
    <style>
        div{
            width: 200px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50px 100px 70px 30px;    
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

输出：

速记属性

下面给出的是border-radius属性的一些变化。这些CSS属性可以用来为一个元素的特定角落设置样式。

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
边框-下-左-半径

每一个属性的值都可以采取这样的形式--长度/百分比{1,2}。| 继承 | 初始

长度可以有一个或两个值。一个半径会使它成为一个圆弧，而两个半径会使它成为椭圆。默认的半径是0。

<html>
<head>
    <style>
        div{
            width: 200px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            margin: 10px;
            padding: 50px;
            justify-content: center;
            display: inline-flex;
        }

        #top-left{
            border-top-left-radius: 70px;
        }

        #top-right{
            border-top-right-radius: 50%;
        }
        #bottom-right{
            border-bottom-right-radius: 20em;
        }
        #bottom-left{
            border-bottom-left-radius: 10rem;
        }
    </style>
</head>
<body>
    <div id = 'top-left'> Top Left </div>
    <div id = 'top-right'> Top Right </div>
    <div id = 'bottom-left'> Bottom Left </div>
    <div id = 'bottom-right'> Bottom Right </div>
</body>
</html>

输出： Capture-4

使用border-radius属性创建的形状

border-radius属性可以用来创建许多html中不能直接使用的形状。

圆：如果每个角的半径被设置为至少是元素长度的50%，就可以创建一个圆。

<html>
<head>
    <style>
        div{
            width: 400px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50%   
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Capture5

椭圆：只要元素的高度和宽度不相等，就可以用与圆相同的方式创建椭圆。

<html>
<head>
    <style>
        div{
            width: 400px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50%   
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Capture6

半圆形

<html>
<head>
    <style>
        div{
            width: 400px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 50% / 100% 100% 0 0 ;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Capture7

叶子

<html>
<head>
    <style>
        div{
            width: 200px; 
            height: 200px;
            background-color: rgb(186, 186, 248);
            border-radius: 0 80% 0 80%;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Capture8

<html>
<head>
    <style>
        div{
            width: 130px;
            height: 175px;
            background-color: rgb(186, 186, 248);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Capture9

通过OpenGenus的这篇文章，你一定对CSS中的圆角/边框半径有了完整的了解。

CSS中border-radius属性的详细指南

CSS语法

速记属性

使用border-radius属性创建的形状