邊框圓角 border-radius
邊框圓角 border-radius 是邊框的特殊樣式，透過不同的半徑圓角，調整四個角落的圓角樣式，讓元素邊框更具設計感，這篇教學會詳細介紹 border-radius 的用法，以及運用邊框圓角做出圓形、半圓形或不同半徑圓角的效果。
請先閱讀：邊框 border
快速導覽：
border-radius 邊框圓角
元素的邊框有個特別的樣式屬性「邊框圓角」，可以使用 border-radius 進行設定「左上、右上、右下、左下」四個角落的邊框「圓角半徑」，預設圓角半徑為 0，半徑從「容器邊框外緣往內計算」，所以圓角的半徑會包含「邊框寬度和內邊距」。
如果圓角半徑長度小於容器的邊長，則會以「最小值」當作半徑使用，例如圓角半徑是 50px，但如果容器高度為 30px，圓角半徑就會自動變成 30px。
設定邊框圓角最常見的做法，會使用 border-radius 一次設定四個角落圓角樣式，寫法共有四種：
| 邊框粗細 | 說明 |
|---|---|
border-radius: 左上 右上 右下 左下; |
空白分隔「四個」數值，分別設定四個角的圓角。 |
border-radius: 左上 (右上左下) 右下; |
空白分隔「三個」數值，分別設定左上、右下和右上左下的圓角，右上左下圓角相同。 |
border-radius: (左上右下) (右上左下); |
空白分隔「兩個」數值，分別設定左上右下和右上左下的圓角，左上右下的圓角相同，右上左下的圓角相同。 |
border-radius: 四個角; |
一個數值，四個角的圓角都相同。 |
下方範例會使用四個 div 分別呈現四種寫法。
<!-- 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，就可以讓元素呈現「圓形」或是「半圓形」的效果。
<!-- 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 半徑不同的效果。
<!-- 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 相同，*有時會運用「撰寫順序」來覆寫特定圓角：
| 單一圓角 | 說明 |
|---|---|
border-top-left-radius |
左上圓角。 |
border-top-right-radius |
右上圓角。 |
border-bottom-right-radius |
右下圓角。 |
border-bottom-left-radius |
左下圓角。 |
使用單一圓角的語法時如果只設定單一數值，就等於是「圓角的半徑」，如果個別設定 x 和 y 半徑，中間使用「空白」分隔，不使用「/」分隔，下方範例展示四個圓角的做法：
<!-- 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>
border-*-radius 單一圓角 ( 根據方向 )
如果網頁設定了 direction 或 writing-mode 等改變文字方向的樣式，單純依靠上下左右設定圓角有時會不容易控制位置，這時就可以透過「根據方向」的圓角樣式來進行調整 ( 注意 start 和 end 的左右方向 )，根據方向的單一圓角權重與 border-radius 相同，有時會運用「撰寫順序」來覆寫特定圓角。
| 單一圓角 | ltr ( 預設 )、vertical-lr 方向 | rtl、vertical-rl 方向 |
|---|---|---|
border-start-start-radius |
左上圓角 | 右上圓角 |
border-start-end-radius |
右上圓角 | 左上圓角 |
border-end-start-radius |
左下圓角 | 右下圓角 |
border-end-end-radius |
右下圓角 | 左下圓角 |
使用單一圓角的語法時如果只設定單一數值，就等於是「圓角的半徑」，如果個別設定 x 和 y 半徑，中間使用「空白」分隔，不使用「/」分隔，下方範例展示根據方向的邊框圓角效果：
<!-- HTML 程式碼 -->
<div>
border-start-start-radius: 50px;<br/>
border-end-end-radius: 30px 100px;
</div>
<div>
direction: rtl;<br/>
border-start-start-radius: 50px;<br/>
border-end-end-radius: 30px 100px;
</div>
<div>
writing-mode: vertical-lr;<br/>
border-start-end-radius: 50px;<br/>
border-end-start-radius: 30px 100px;
</div>
<div>
writing-mode: vertical-lr;<br/>
border-start-end-radius: 50px;<br/>
border-end-start-radius: 30px 100px;
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 300px;
height: 100px;
border: 2px solid #000;
margin: 10px;
padding: 10px;
}
div:nth-child(1) {
border-start-start-radius: 50px;
border-end-end-radius: 30px 100px;
}
div:nth-child(2) {
direction: rtl; /* 右到左 */
border-start-start-radius: 50px; /* 變成右上角 */
border-end-end-radius: 30px 100px; /* 變成左下角 */
}
div:nth-child(3) {
writing-mode: vertical-lr; /* 垂直左到右 */
border-start-start-radius: 50px;
border-end-end-radius: 30px 100px;
}
div:nth-child(4) {
writing-mode: vertical-rl; /* 垂直右到左 */
border-start-start-radius: 50px; /* 變成右上角 */
border-end-end-radius: 30px 100px; /* 變成左下角 */
}
</style>
邊框圓角的長度單位
邊框圓角的半徑使用「具有長度單位」的數值，下方列出支援的長度單位：
延伸閱讀：長度與角度單位
| 長度單位 | 性質 | 說明 |
|---|---|---|
| px | 絕對長度 | 像素。 |
| % | 相對長度 | x 為寬度百分比，y 為高度百分比。 |
| em | 相對長度 | 元素本身字體大小的幾倍。 |
| rem | 相對長度 | 根元素字體大小的幾倍。 |
| pt、cm、mm、in | 絕對長度 | 印刷單位。 |
下方範例使會使用四個 div，使用不同的長度單位呈現不同的圓角，長度單位可以混合使用，只要最後可以正確計算出數值就可以。
<!-- 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>
連接不同樣式的邊框圓角
由於邊框可以設定「樣式」，所以搭配邊框圓角後，這些樣式也會跟著發生「變形」的狀況，下方範例呈現不同邊框樣式在不同邊框圓角下的變形效果。
<!-- 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 載入內容的元素 )：元素本身內容被裁切，圓角之外不會顯示元素。
下方的範例會呈現背景色和圖片被邊框圓角裁切的狀況。
<!-- 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>
雖然邊框圓角會發生裁切現象，但邊框圓角不會裁切「不可置換元素」的內容，如果邊框圓角的半徑太大和內容重疊，而內容又具有「背景色」，就會發生邊框圓角被內容背景遮蔽的狀況，下方的範例將內容元素的背景變成有點半透明，就能看到後方邊框圓角被內容遮蔽的狀況。
<!-- 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>
小結
邊框圓角式設計特殊邊框不可或缺的功能，許多較具特色的按鈕或區塊，也都會使用些許的邊框圓角來加強設計感，透過這篇教學，就能完整掌握邊框圓角的用法。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～