CSS - border-radius 属性

CSS border-radius 属性用于使元素外边框的角变圆。它是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 属性的简写属性。根据提供给该属性的值的数量（一个到四个），不同的部分将被圆角化。

语法

border-radius: length | percentage | initial | inherit;

属性值

值	描述
长度	它使用长度单位指定角的圆度 (例如 10px 20px)。默认值为 0。
百分比	它使用百分比指定角的圆度 (例如 10% 20%)。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 边框半径属性示例

以下示例使用不同的值解释了 border-radius 属性。

使用长度值的边框半径属性

要定义元素外边框角的圆度，我们可以使用长度值指定半径（例如 10px 20px 30px 2px、25px 40px 等）。该属性取决于传递的值的数量。以下示例通过采用不同数量的值来演示这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<style>
   .container {
      box-shadow: 10px 10px 10px grey;
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightgreen;
   }

   #one {
      border-radius: 20px;
   }

   #two {
      border-radius: 15px 50px;
   }

   #three {
      border-radius: 15px 45px 90px;
   }

   #four {
      border-radius: 15px 45px 75px 10px;

   }
</style>

<head>
</head>

<body>
   <h2>
   CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a single value 20px
         for the border-radius property. 
         So all the four corners top-left,
         top-right, bottom-right and bottom-left
         have the same radius corners as shown here.</p>
      <p id="one" class="box"> 
         20px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses two values 15px 50px 
         for the border-radius property. top-left 
         and bottom-rigth corners have 15px radius
         while top-right and bottom-left have 50px
         radii corners as shown here.
      </p>
      <p id="two" class="box">
         15px 50px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses three values
         15px 45px 90px for the border-radius
         property. top-left has 15px radius, 
         top-right and bottom-left have 45px 
         radius and bottom-right has 90px radius
      as shown here.
      </p>
      <p id="three" class="box">
         15px 45px 90px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses four values 15px
         45px 75px 10px for the border-radius
         property. top-left has 15px radius, 
         top-right has 45px, bottom-right has
         75px and bottom-left has 10px radii 
         corners as shown here.
      </p>
      <p id="four" class="box">
         15px 45px 75px 10px
      </p>
   </div>
</body>

</html>

使用百分比值的边框半径属性

要定义元素外边框角的圆度，我们可以使用百分比值指定半径（例如 10% 20% 30% 2%、25% 40% 等）。该属性取决于传递的值的数量。以下示例通过采用不同数量的值来演示这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<style>
   .container {
      box-shadow: 10px 10px 10px grey;
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightblue;
   }

   #one {
      border-radius: 20%;
   }

   #two {
      border-radius: 15% 50%;
   }

   #three {
      border-radius: 15% 45% 90%;
   }

   #four {
      border-radius: 15% 45% 75% 10%;

   }
</style>

<head>
</head>

<body>
   <h2>
      CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a single value 20%
         for the border-radius property. 
         So all the four corners top-left,
         top-right, bottom-right and bottom-left
         have the same radius corners 
         as shown here.
      </p>
      <p id="one" class="box">
         20%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses two values 15% 50%
         for the border-radius property. 
         top-left ad bottom-rigth corners 
         have 15% radius while top-right and
         bottom-left have 50% radii corners 
         as shown here.
      </p>
      <p id="two" class="box">
         15% 50%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses three values 15% 45% 90%
         for the border-radius property. top-left
         has 15% radius, top-right and bottom-left
         have 45% radius and bottom-right has 90% 
         radius as shown here.
      </p>
      <p id="three" class="box">
         15% 45% 90%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses four values 15% 45% 75% 10%
         for the border-radius property. top-left 
         has 15% radius, top-right has 45%, 
         bottom-right has 75% and bottom-left has
         10% radii corners as shown here.
      </p>
      <p id="four" class="box">
         15% 45% 75% 10%
      </p>
   </div>
</body>

</html>

使用混合值的边框半径属性

要定义元素外边框角的圆度，我们可以使用长度值和百分比值的组合指定半径（例如 10px 20%、15px 40% 等）。以下示例演示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<style>
   .container {
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightpink;
   }

   #one {
      border-radius: 15px 40%;
   }
</style>

<head>
</head>

<body>
   <h2>
      CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a combination of length
         and percentage values. top-left and 
         bottom-right corners are given 15px 
         radii while top-right and bottom-left
         are given with 40% radii as shown here.
      </p>
      <p id="one" class="box">
         15px 40%
      </p>
   </div>

</body>

</html>

注意：border-radius 属性最多接受四个值，因此根据给定值的数量，角将相应地被圆角化。

一个值：如果给出一个值，它将应用于左上角、右上角、右下角和左下角。
两个值：如果给出两个值，第一个值将应用于左上角和右下角，第二个值将应用于右上角和左下角。
三个值：如果给出三个值，第一个值将应用于左上角，第二个值应用于右上角和左下角，最后一个值将应用于右下角。
四个值：如果给出四个值，第一个值将应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。

支持的浏览器

属性
border-radius	5.0	9.0	4.0	5.0	10.5

css_properties_reference.htm

打印页面