邊框圓角 border-radius

邊框圓角 border-radius 是邊框的特殊樣式，透過不同的半徑圓角，調整四個角落的圓角樣式，讓元素邊框更具設計感，這篇教學會詳細介紹 border-radius 的用法，以及運用邊框圓角做出圓形、半圓形或不同半徑圓角的效果。

請先閱讀：邊框 border

快速導覽：

• border-radius 邊框圓角
• border-radius 邊框圓角 ( x/y 半徑 )
• border-*-radius 單一圓角
• 邊框圓角的長度單位
• 連接不同樣式的邊框圓角
• 邊框圓角的裁切現象

border-radius 邊框圓角

元素的邊框有個特別的樣式屬性「邊框圓角」，可以使用 border-radius 進行設定「左上、右上、右下、左下」四個角落的邊框「圓角半徑」，預設圓角半徑為 0，半徑從「容器邊框外緣往內計算」，所以圓角的半徑會包含「邊框寬度和內邊距」。

如果圓角半徑長度小於容器的邊長，則會以「最小值」當作半徑使用，例如圓角半徑是 50px，但如果容器高度為 30px，圓角半徑就會自動變成 30px。

設定邊框圓角最常見的做法，會使用 border-radius 一次設定四個角落圓角樣式，寫法共有四種：

下方範例會使用四個 div 分別呈現四種寫法。

線上展示：https://codepen.io/oxxo/pen/LYowbRG

<!-- HTML 程式碼 -->
<div class="a">border-radius: 5px 15px 30px 50px;</div>
<div class="b">border-radius: 5px 15px 30px;</div>
<div class="c">border-radius: 5px 30px;</div>
<div class="d">border-radius: 15px;</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width:300px;
    height: 50px;
    border: 2px solid #000;
    margin: 10px;
    padding: 10px;
  }
  .a {border-radius: 5px 15px 30px 50px;}
  .b {border-radius: 5px 15px 30px;}
  .c {border-radius: 5px 30px;}
  .d {border-radius: 15px;}
</style>

運用邊框圓角的方式，將某些角落半徑設定與長度或寬度相同，或將某些角落半徑設定為 0，就可以讓元素呈現「圓形」或是「半圓形」的效果。

線上展示：https://codepen.io/oxxo/pen/RwmXoGp

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    box-sizing: border-box;
    margin: 10px;
    float: left;
  }
  .a {
    border-radius: 50px;
  }
  .b {
    height: 50px;
    border-radius: 50px 50px 0 0;
  }
  .c {
    width: 50px;
    border-radius: 0 50px 50px 0;
  }
</style>

border-radius 邊框圓角 ( x/y 半徑 )

除了固定半徑的圓角效果，CSS 提供了「x 和 y 半徑不同」的設定方式，只要使用「/」分開數值，將原本的寫法改成「x 方向半徑 / y 方向半徑」，就能設定 x 和 y 半徑不同的圓角，就能做出更多有趣的效果，寫法如下：

div {
  border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下;
  border-radius: 左上 (右上左下) 右下 / 左上 (右上左下) 右下;
  border-radius: (左上右下) (右上左下) / (左上右下) (右上左下);
  border-radius: 四個角 / 四個角;
}

下方範例會使用四個 div 分別呈現圓角 x y 半徑不同的效果。

線上展示：https://codepen.io/oxxo/pen/jOogVMv

<!-- HTML 程式碼 -->
<div class="a">border-radius: 100px 55px 30px 50px / 30px 30px 50px 20px;</div>
<div class="b">border-radius: 20px 30px 50px / 50px 5px 20px;</div>
<div class="c">border-radius: 5px 30px / 50px 20px;</div>
<div class="d">border-radius: 20px / 50px;</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    height: 100px;
    border: 2px solid #000;
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    font-size:14px
  }
  .a {border-radius: 100px 55px 30px 50px / 30px 30px 50px 20px;}
  .b {border-radius: 20px 30px 50px / 50px 5px 20px;}
  .c {border-radius: 5px 30px / 50px 20px;}
  .d {border-radius: 20px / 50px;}
</style>

border-*-radius 單一圓角

除了一次性的設定四個圓角，CSS 也提供單獨設定單一圓角的樣式語法，單一圓角的權重與 border-radius 相同，*有時會運用「撰寫順序」來覆寫特定圓角：

如果要使用單一圓角的語法，如果只設定單一數值，就等於是「圓角的半徑」，如果個別設定 x 和 y 半徑，中間使用「空白」分隔，不使用「/」分隔，下方範例展示四個圓角的做法：

線上展示：https://codepen.io/oxxo/pen/yLWmVaG

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    height: 100px;
    border: 2px solid #000;
    box-sizing: border-box;
    margin: 10px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px 20px;
    border-bottom-right-radius: 30px 50px;
    border-bottom-left-radius: 100px 50px;
  }
</style>

邊框圓角的長度單位

邊框圓角的半徑使用「具有長度單位」的數值，下方列出支援的長度單位：

延伸閱讀：長度與角度單位

下方範例使會使用四個 div，使用不同的長度單位呈現不同的圓角，長度單位可以混合使用，只要最後可以正確計算出數值就可以。

線上展示：https://codepen.io/oxxo/pen/zYQgooO

<!-- HTML 程式碼 -->
<div class="a">border-radius: 20%;</div>
<div class="b">border-radius: 20% / 60%;</div>
<div class="c">border-radius: 2em;</div>
<div class="d">border-radius: 4rem;</div>

<!-- CSS 程式碼 -->
<style>
  :root {font-size: 10px;}
  div {
    width: 300px;
    height: 100px;
    border: 2px solid #000;
    box-sizing: border-box;
    margin: 10px;
    padding: 20px;
    font-size: 15px;
  }

  .a {border-radius: 20%;}         /* x 半徑 300px x 20% = 60px，y 半徑 100px x 20% = 20px */
  .b {border-radius: 20% / 60%;}   /* x 半徑 300px x 20% = 60px，y 半徑 100px x 60% = 60px */
  .c {border-radius: 4em;}         /* xy 半徑都是 15px x 4 = 60px */
  .d {border-radius: 6rem;}        /* xy 半徑都是 10px x 6 = 60px */
</style>

連接不同樣式的邊框圓角

由於邊框可以設定「樣式」，所以搭配邊框圓角後，這些樣式也會跟著發生「變形」的狀況，下方範例呈現不同邊框樣式在不同邊框圓角下的變形效果。

線上展示：https://codepen.io/oxxo/pen/oNRKYYL

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    margin: 10px;
  }
  .a {
    border-top: 25px double red;
    border-right: 25px groove green;
    border-bottom: 25px dashed orange;
    border-left: 25px solid gray;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px 20px;
    border-bottom-right-radius: 50px 100px;
    border-bottom-left-radius: 20px 20px;
  }
  .b {
    border-top: 30px double red;
    border-right: 20px groove green;
    border-bottom: 10px dashed orange;
    border-left: 5px solid gray;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px 20px;
    border-bottom-right-radius: 50px 100px;
    border-bottom-left-radius: 20px 20px;
  }
</style>

邊框圓角的裁切現象

當容器進行邊框圓角效果時，會發生背景或內容的「裁切」現象，不過就算發生裁切現象，元素本身的容器仍然佔有「四方形」的空間，並不會因為裁切產生額外的空間，只會會出現下方的背景，裁切現象主要有兩種：

• 非置換元素：背景被裁切，圓角之外不會顯示背景。
• 可置換的元素 ( img 或 svg 等使用 src 載入內容的元素 )：元素本身內容被裁切，圓角之外不會顯示元素。

下方的範例會呈現背景色和圖片被邊框圓角裁切的狀況。

線上展示：https://codepen.io/oxxo/pen/OJYKbbz

<!-- HTML 程式碼 -->
<div><span>圓角發生背景裁切，所佔空間仍然是四方形。</div>
<span>圓角發生背景裁切</span></span>
<img src="https://steam.oxxostudio.tw/image/index-css.jpg">
<span>所佔空間仍然是四方形。</span>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    padding: 10px;
    margin: 20px;
    background: orange;
    border-radius: 50px / 0 100px 0 100px;
  }
  img {
    width: 150px;
    border-radius: 50px / 0 0 100px 100px;
  }
  span {
    background: yellow;
  }
</style>

雖然邊框圓角會發生裁切現象，但邊框圓角不會裁切「不可置換元素」的內容，如果邊框圓角的半徑太大和內容重疊，而內容又具有「背景色」，就會發生邊框圓角被內容背景遮蔽的狀況，下方的範例將內容元素的背景變成有點半透明，就能看到後方邊框圓角被內容遮蔽的狀況。

線上展示：https://codepen.io/oxxo/pen/zYVOvVE

<!-- HTML 程式碼 -->
<div class="a"><span>STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span></div>
<div class="b"><span></span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 150px;
    border: 5px solid #000;
    border-radius: 60px;
    margin: 10px;
  }
  .a span {
    background: #ff0e;  /* 背景有點透明 */
  }
  .b span {
    display: block;
    width: 100%;
    height: 100%;
    background: #ff0e;  /* 背景有點透明 */
  }
</style>

小結

邊框圓角式設計特殊邊框不可或缺的功能，許多較具特色的按鈕或區塊，也都會使用些許的邊框圓角來加強設計感，透過這篇教學，就能完整掌握邊框圓角的用法。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～