CSS - border-bottom-left-radius 屬性

CSS border-bottom-left-radius 屬性控制元素邊框左下角的圓角程度。

語法

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

屬性值

值	描述
長度值	它使用長度值定義左下角圓角的大小。預設值為 0。
百分比	它使用百分比值定義左下角圓角的大小。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 邊框左下角圓角屬性示例

以下示例使用不同的值解釋了border-bottom-left-radius 屬性。

使用長度值的邊框左下角圓角

要設定左下角邊框的圓角，可以使用長度值指定半徑。在以下示例中，使用border-bottom-left-radius 屬性使用了 80px 半徑。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用百分比值的邊框左下角圓角

要設定左下角邊框的圓角，可以使用百分比值指定半徑。在以下示例中，使用border-bottom-left-radius 屬性使用了 30% 半徑。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用兩個值的邊框左下角圓角

要設定左下角邊框的圓角，可以使用一個或兩個值。單個值會統一影響半徑，而兩個值分別設定水平和垂直半徑。以下示例顯示了區別。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

支援的瀏覽器

屬性
border-bottom-left-radius	5.0	9.0	4.0	5.0	10.5

css_properties_reference.htm

列印頁面