CSS - border-radius 屬性

CSS border-radius 屬性用於使元素外邊框的角變圓。它是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 屬性的簡寫屬性。根據提供給該屬性的值的數量（一個到四個），不同的部分將被圓角化。

語法

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

屬性值

值	描述
長度	它使用長度單位指定角的圓度 (例如 10px 20px)。預設值為 0。
百分比	它使用百分比指定角的圓度 (例如 10% 20%)。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS 邊框半徑屬性示例

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

使用長度值的邊框半徑屬性

要定義元素外邊框角的圓度，我們可以使用長度值指定半徑（例如 10px 20px 30px 2px、25px 40px 等）。該屬性取決於傳遞的值的數量。以下示例透過採用不同數量的值來演示這一點。

示例

<!DOCTYPE html>
<html>

<style>
   .container {
      box-shadow: 10px 10px 10px grey;
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightgreen;
   }

   #one {
      border-radius: 20px;
   }

   #two {
      border-radius: 15px 50px;
   }

   #three {
      border-radius: 15px 45px 90px;
   }

   #four {
      border-radius: 15px 45px 75px 10px;

   }
</style>

<head>
</head>

<body>
   <h2>
   CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a single value 20px
         for the border-radius property. 
         So all the four corners top-left,
         top-right, bottom-right and bottom-left
         have the same radius corners as shown here.</p>
      <p id="one" class="box"> 
         20px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses two values 15px 50px 
         for the border-radius property. top-left 
         and bottom-rigth corners have 15px radius
         while top-right and bottom-left have 50px
         radii corners as shown here.
      </p>
      <p id="two" class="box">
         15px 50px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses three values
         15px 45px 90px for the border-radius
         property. top-left has 15px radius, 
         top-right and bottom-left have 45px 
         radius and bottom-right has 90px radius
      as shown here.
      </p>
      <p id="three" class="box">
         15px 45px 90px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses four values 15px
         45px 75px 10px for the border-radius
         property. top-left has 15px radius, 
         top-right has 45px, bottom-right has
         75px and bottom-left has 10px radii 
         corners as shown here.
      </p>
      <p id="four" class="box">
         15px 45px 75px 10px
      </p>
   </div>
</body>

</html>

使用百分比值的邊框半徑屬性

要定義元素外邊框角的圓度，我們可以使用百分比值指定半徑（例如 10% 20% 30% 2%、25% 40% 等）。該屬性取決於傳遞的值的數量。以下示例透過採用不同數量的值來演示這一點。

示例

<!DOCTYPE html>
<html>

<style>
   .container {
      box-shadow: 10px 10px 10px grey;
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightblue;
   }

   #one {
      border-radius: 20%;
   }

   #two {
      border-radius: 15% 50%;
   }

   #three {
      border-radius: 15% 45% 90%;
   }

   #four {
      border-radius: 15% 45% 75% 10%;

   }
</style>

<head>
</head>

<body>
   <h2>
      CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a single value 20%
         for the border-radius property. 
         So all the four corners top-left,
         top-right, bottom-right and bottom-left
         have the same radius corners 
         as shown here.
      </p>
      <p id="one" class="box">
         20%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses two values 15% 50%
         for the border-radius property. 
         top-left ad bottom-rigth corners 
         have 15% radius while top-right and
         bottom-left have 50% radii corners 
         as shown here.
      </p>
      <p id="two" class="box">
         15% 50%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses three values 15% 45% 90%
         for the border-radius property. top-left
         has 15% radius, top-right and bottom-left
         have 45% radius and bottom-right has 90% 
         radius as shown here.
      </p>
      <p id="three" class="box">
         15% 45% 90%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses four values 15% 45% 75% 10%
         for the border-radius property. top-left 
         has 15% radius, top-right has 45%, 
         bottom-right has 75% and bottom-left has
         10% radii corners as shown here.
      </p>
      <p id="four" class="box">
         15% 45% 75% 10%
      </p>
   </div>
</body>

</html>

使用混合值的邊框半徑屬性

要定義元素外邊框角的圓度，我們可以使用長度值和百分比值的組合指定半徑（例如 10px 20%、15px 40% 等）。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<style>
   .container {
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightpink;
   }

   #one {
      border-radius: 15px 40%;
   }
</style>

<head>
</head>

<body>
   <h2>
      CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a combination of length
         and percentage values. top-left and 
         bottom-right corners are given 15px 
         radii while top-right and bottom-left
         are given with 40% radii as shown here.
      </p>
      <p id="one" class="box">
         15px 40%
      </p>
   </div>

</body>

</html>

注意：border-radius 屬性最多接受四個值，因此根據給定值的數量，角將相應地被圓角化。

一個值：如果給出一個值，它將應用於左上角、右上角、右下角和左下角。
兩個值：如果給出兩個值，第一個值將應用於左上角和右下角，第二個值將應用於右上角和左下角。
三個值：如果給出三個值，第一個值將應用於左上角，第二個值應用於右上角和左下角，最後一個值將應用於右下角。
四個值：如果給出四個值，第一個值將應用於左上角，第二個值應用於右上角，第三個值應用於右下角，第四個值應用於左下角。

支援的瀏覽器

屬性
border-radius	5.0	9.0	4.0	5.0	10.5

css_properties_reference.htm

列印頁面