CSS - border-bottom-right-radius 属性

CSS border-bottom-right-radius 属性控制元素边框右下角的圆角。

语法

border-bottom-right-radius: length | % [length | %] | initial | inherit;

属性值

值	描述
长度	它使用长度值定义右下角圆角的大小。默认值为 0。
百分比	它使用百分比值定义右下角圆角的大小。
初始	这将属性设置为其默认值。
继承	这从父元素继承属性。

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-bottom-right-radius 属性。

使用长度值的边框右下角圆角

要设置右下边框的圆角，我们可以使用长度值指定半径。在以下示例中，80px 半径已与 border-bottom-right-radius 属性一起使用。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         border: 3px solid black;
         border-bottom-right-radius: 80px;
         width: 200px;
         height: 200px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-right-radius property
   </h2>
   <div class="rounded-border">
      This shows the border-bottom-right-radius property 
      with 80px radius.
   </div>
</body>

</html>

使用百分比值的边框右下角圆角

要设置右下边框的圆角，我们可以使用百分比值指定半径。在以下示例中，30% 半径已与 border-bottom-right-radius 属性一起使用。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         border: 3px solid black;
         border-bottom-right-radius: 30%;
         width: 200px;
         height: 200px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-right-radius property
   </h2>
   <div class="rounded-border">
      This shows the border-bottom-right-radius property 
      with 30% radius.
   </div>
</body>

</html>

使用两个值的边框右下角圆角

要设置右下边框的圆角，我们可以使用一个或两个值。单个值会统一影响半径，而两个值则分别设置水平和垂直半径。以下示例显示了差异。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .single-value {
         border: 3px solid black;
         border-bottom-right-radius: 60px;
         width: 200px;
         height: 200px;
      }

      .double-value {
         border: 3px solid black;
         border-bottom-right-radius: 60px 10px;
         width: 200px;
         height: 200px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-right-radius property
   </h2>
   <p class="single-value">
      This shows the border-bottom-right-radius property 
      with single value.
   </p>
   <p class="double-value">
      This shows the border-bottom-right-radius property 
      with two values.
   </p>
</body>

</html>

支持的浏览器

属性
border-bottom-right-radius	5.0	9.0	4.0	5.0	10.5

css_properties_reference.htm

打印页面