CSS - border-start-end-radius 属性

CSS border-start-end-radius 属性定义了元素的块起始边和内联结束边之间角的圆角半径。该属性是一个逻辑边框半径，这意味着其值取决于元素的书写模式、方向和文本方向。

语法

border-start-end-radius: 0 | length | percentage | initial | inherit;

属性值

值	描述
0	没有圆角效果。默认值。
长度	使用长度值定义块起始和内联结束角的圆度。
百分比	使用百分比值定义块起始和内联结束角的圆度。
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-start-end-radius 属性。

值为零的边框起始结束半径属性

为了在块起始和内联结束角不产生任何圆角效果，我们可以使用 0。在下面的示例中，使用了 0 值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         padding:20px;
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-start-end-radius: 0;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <div class="rounded-box">
      No rounded corner for block-start and inline-end corner.
   </div>
</body>

</html>

使用长度值的边框起始结束半径属性

为了在块起始和内联结束角产生圆角效果，我们可以使用长度值（例如 10px、20px 30px 等）指定圆度。在下面的示例中，使用了长度值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 15px;
         border: 3px solid red;
      }

      .rounded-box1 {
         border-start-end-radius: 80px;
      }

      .rounded-box2 {
         border-start-end-radius: 80px 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
   Single Value: 80px (The corner will be a circle)
   </h3>
   <p class="boxes rounded-box1">
      Rounded corner for block-start and
      inline-end corner with single value.
   </p>
   <h3>
   Two Values: 80px 80px (The corner will be an ellipse)
   </h3>
   <p class="boxes rounded-box2">
      Rounded corner for block-start and
      inline-end corner with two values.
   </p>
</body>

</html>

使用百分比值的边框起始结束半径属性

为了在块起始和内联结束角产生圆角效果，我们可以使用百分比值（例如 10%、20% 30% 等）指定圆度。在下面的示例中，使用了百分比值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 15px;
         border: 3px solid red;
      }

      .rounded-box1 {
         border-start-end-radius: 50%;
      }

      .rounded-box2 {
         border-start-end-radius: 50% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
   Single Value: 50% (The corner will be a circle)
   </h3>
   <p class="boxes rounded-box1">
      Rounded corner for block-start and
      inline-end corner with single value.
   </p>
   <h3>
   Two Values: 50% 50% (The corner will be an ellipse)
   </h3>
   <p class="boxes rounded-box2">
      Rounded corner for block-start and
      inline-end corner with two values.
   </p>
</body>

</html>

带有方向的边框起始结束半径属性

在border-start-end-radius 的上下文中，direction 参数决定了要圆哪个角。在 LTR 方向上，右上角是圆的，而在 RTL 方向上，左上角是圆的。LTR 是默认方向。这些在下面的示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 20px;
         border: 3px solid red;
         border-start-end-radius: 120px 60px;
      }

      .right {
         direction: ltr;
      }

      .left {
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
      Left-to-Right direction: top right corner is rounded
   </h3>
   <p class=" boxes right">
      block-start and inline-end 
      rounded corner using direction: ltr
   </p>
   <h3>
      Right-to-Left direction: top left corner is rounded
   </h3>
   <p class="boxes left">
      block-start and inline-end 
      rounded corner using direction: rtl
   </p>
</body>

</html>

带有书写模式的边框起始结束半径属性

border-start-end-radius 属性可以与writing-mode: vertical-lr 一起使用，它将文本垂直排列，从上到下，从左到右。同样，使用writing-mode: vertical-rl，它将文本垂直排列，从上到下，从右到左。这些在下面的示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         width: 150px;
         height: 150px;
         padding: 20px;
         border: 3px solid red;
         margin: 10px;
         border-start-end-radius: 30%;
      }

      .top-left-lr {
         writing-mode: vertical-lr;
      }

      .top-left-rl {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
   Writing mode: vertical-lr
   </h3>
   <div class="rounded-box top-left-lr">
      block-start and inline-end rounded corner
      using vertical-lr.
   </div>
   <h3>
   Writing mode: vertical-rl
   </h3>
   <div class="rounded-box top-left-rl">
      block-start and inline-end rounded corner
      using vertical-rl.
   </div>
</body>

</html>

注意：border-start-end-radius 属性最多可以取两个值，因此根据传递的值的数量，将决定角的圆度。

一个值：如果给属性一个值，则块起始和内联结束处的角将是圆形的。
两个值：如果给属性两个值，则块起始和内联结束处的角将是椭圆形的。

支持的浏览器

属性
border-start-end-radius	89.0	89.0	66.0	15.0	75.0

css_properties_reference.htm

打印页面