CSS - border-end-start-radius 屬性

CSS border-end-start-radius 屬性定義元素塊級末端和內聯起始端之間角的半徑。此屬性是邏輯邊框半徑，這意味著其值取決於元素的書寫模式、方向和文字方向。

語法

border-end-start-radius: 0 | length | percentage | initial | inherit;

屬性值

值	描述
0	它不顯示任何圓角效果。預設值。
長度	它使用長度值定義塊級末端和內聯起始端角的圓度。
百分比	它使用百分比值定義塊級末端和內聯起始端角的圓度。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 邊框末端起始半徑屬性示例

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

邊框末端起始半徑為零值

為了不在塊的末端和內聯角的起始處有任何圓角效果，我們可以使用 0。在以下示例中，使用了 0 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 0;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <div class="rounded-box">
      No rounded corner for block-end and inline-start corner.
   </div>
</body>

</html>

邊框末端起始半徑為長度值

為了在塊的末端和內聯角的起始處產生圓角效果，我們可以使用長度值（例如 10px）來指定半徑。在以下示例中，使用了 80px 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
      .rounded-box1 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 80px;
      }

      .rounded-box2 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 80px 80px;
      }
    </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <p class="rounded-box1">
      Rounded corner for block-end and inline-start 
      corner with single value.
   </p>
   <p class="rounded-box2">
      Rounded corner for block-end and inline-start 
      corner with two values.
   </p>
</body>

</html>

邊框末端起始半徑為百分比值

為了在塊的末端和內聯角的起始處產生圓角效果，我們可以使用百分比值（例如 10%）來指定半徑。在以下示例中，使用了 50% 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box1 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 50%;
      }

      .rounded-box2 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 50% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <p class="rounded-box1">
      Rounded corner for block-end and inline-start 
      corner with single value.
   </p>
   <p class="rounded-box2">
      Rounded corner for block-end and inline-start 
      corner with two values.
   </p>
</body>

</html>

帶方向的邊框末端起始半徑

在 border-end-start-radius 上下文中，direction 引數決定要圓哪個角。在 LTR 方向中，左下角是圓的，而在 RTL 方向中，右下角是圓的。LTR 是預設方向。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #right {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 120px 60px;
         direction: ltr;
      }

      #left {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 120px 60px;
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <p id="right">
      block-end and inline-start rounded 
      corner using direction: ltr
   </p>
   <p id="left">
      block-end and inline-start rounded 
      corner using direction: rtl
   </p>
</body>

</html>

帶書寫模式的邊框末端起始半徑

border-end-start-radius 屬性可以與 writing-mode: vertical-lr 一起使用，它將文字從上到下、從左到右垂直排列。類似地，使用 writing-mode: vertical-rl，它將文字從上到下、從右到左垂直排列。這些在以下示例中顯示。

示例

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      border: 3px solid green;
      margin: 10px;
   }
   .top-left-lr {
      border-end-start-radius: 30%;
      writing-mode: vertical-lr;
   }
   .top-left-rl {
      border-end-start-radius: 30%;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <h2>
      CSS border-end-start-radius property</h2>
   <div class="rounded-box top-left-lr">
      block-end and inline-start rounded 
      corner using vertical-lr.
   </div>
   <div class="rounded-box top-left-rl">
      block-end and inline-start rounded 
      corner using vertical-rl.
   </div>
</body>
</html>

支援的瀏覽器

屬性
border-end-start-radius	89.0	89.0	66.0	15.0	75.0

css_properties_reference.htm

列印頁面