CSS - border-top-left-radius 属性

CSS border-top-left-radius 属性控制元素边框左上角的圆角。

语法

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

属性值

值	描述
长度	使用长度值定义左上角边框的圆角。
百分比	使用百分比值定义左上角边框的圆角。
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-left-radius 属性。

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

要设置左上角边框的圆角，我们可以使用长度值指定半径（例如 10px、15px 20px 等）。单个值适用于顶部和左侧边框，两个值时，第一个值应用于顶部边框，第二个值应用于左侧边框。以下示例中显示了这些情况。

示例

Open Compiler

<!DOCTYPE html>
<html>

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

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

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

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

</html>

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

要设置左上角边框的圆角，我们可以使用百分比值指定半径（例如 10%、15% 20% 等）。单个值适用于顶部和左侧边框，两个值时，第一个值应用于顶部边框，第二个值应用于左侧边框。以下示例中显示了这些情况。

示例

Open Compiler

<!DOCTYPE html>
<html>

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

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

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

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

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面