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	從父元素繼承屬性。

CSS 邊框右上角圓角屬性示例

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

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

要設定右上角邊框的圓角程度，我們可以使用長度值 (例如 10px、15px 20px 等) 指定半徑。單個值應用於頂部和右側邊框，使用兩個值時，第一個值應用於頂部邊框，第二個值應用於右側邊框。以下示例對此進行了說明。

示例

<!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% 等) 指定半徑。單個值應用於頂部和右側邊框，使用兩個值時，第一個值應用於頂部邊框，第二個值應用於右側邊框。以下示例對此進行了說明。

示例

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

列印頁面