CSS - border-top-left-radius 屬性

CSS border-top-left-radius 屬性控制元素邊框左上角的圓角。

語法

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

屬性值

值	描述
長度	使用長度值定義左上角邊框的圓角。
百分比	使用百分比值定義左上角邊框的圓角。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 邊框左上角半徑屬性示例

以下示例說明了使用不同值的 border-top-left-radius 屬性。

使用長度值的左上角邊框屬性

要設定左上角邊框的圓角，我們可以使用長度值指定半徑（例如 10px、15px 20px 等）。單個值適用於頂部和左側邊框，兩個值時，第一個值應用於頂部邊框，第二個值應用於左側邊框。以下示例中顯示了這些情況。

示例

<!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% 等）。單個值適用於頂部和左側邊框，兩個值時，第一個值應用於頂部邊框，第二個值應用於左側邊框。以下示例中顯示了這些情況。

示例

<!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

列印頁面