CSS - border-top-right-radius 属性

CSS border-top-right-radius 属性控制元素边框右上角的圆角程度。

语法

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

属性值

值	描述
长度值	使用长度值 (例如 10px、15px 20px 等) 定义右上角边框的圆角程度。单个值应用于顶部和右侧边框，两个值时，第一个值应用于顶部边框，第二个值应用于右侧边框。
百分比	使用百分比值 (例如 10%、15% 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-top-right-radius 属性。

使用长度值的边框右上角属性

要设置右上角边框的圆角程度，我们可以使用长度值 (例如 10px、15px 20px 等) 指定半径。单个值应用于顶部和右侧边框，使用两个值时，第一个值应用于顶部边框，第二个值应用于右侧边框。以下示例对此进行了说明。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         background-color: lightblue;
         text-align: center;
         padding: 10px;
         border: 3px solid blue;
         width: 200px;
         height: 200px;
      }

      .box1 {
         border-top-right-radius: 50px;
      }

      .box2 {
         border-top-right-radius: 70px 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS boder-top-right-radius property
   </h2>
   <h3>
      Single Value: 50px (applies to both top and right borders)
   </h3>
   <div class="rounded-border box1">
      <p>top-right rounded corner.</p>
   </div>
   <h3>
      Two Values: 70px 80px (70px applies to top border
      and 80px applies to right border)
   </h3>
   <div class="rounded-border box2">
      <p>top-right rounded corner.</p>
   </div>
</body>

</html>

使用百分比值的边框右上角属性

要设置右上角边框的圆角程度，我们可以使用百分比值 (例如 10%、15% 20% 等) 指定半径。单个值应用于顶部和右侧边框，使用两个值时，第一个值应用于顶部边框，第二个值应用于右侧边框。以下示例对此进行了说明。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         background-color: lightblue;
         text-align: center;
         padding: 10px;
         border: 3px solid blue;
         width: 200px;
         height: 200px;
      }

      .box1 {
         border-top-right-radius: 30%;
      }

      .box2 {
         border-top-right-radius: 30% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS boder-top-right-radius property
   </h2>
   <h3>
      Single Value: 30% (applies to both top and right borders)
   </h3>
   <div class="rounded-border box1">
      <p>top-right rounded corner.</p>
   </div>
   <h3>
      Two Values: 30% 50% (30% applies to top border
      and 50% applies to right border)
   </h3>
   <div class="rounded-border box2">
      <p>top-right rounded corner.</p>
   </div>
</body>

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面