边框圆角 ( border-radius )

边框圆角 border-radius 是边框的特殊样式，透过不同的半径圆角，调整四个角落的圆角样式，让元素边框更具设计感，这篇教学会详细介绍 border-radius 的用法，以及运用边框圆角做出圆形、半圆形或不同半径圆角的效果。

请先阅读：边框 border

快速导览：

• border-radius 边框圆角
• border-radius 边框圆角 ( x/y 半径 )
• border-*-radius 单一圆角 ( 基本上下左右 )
• border-*-radius 单一圆角 ( 根据方向 )
• 边框圆角的长度单位
• 连接不同样式的边框圆角
• 边框圆角的裁切现象
• 半径大于宽高的边框圆角

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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>

border-*-radius 单一圆角 ( 根据方向 )

如果网页设定了 direction 或 writing-mode 等改变文字方向的样式，单纯依靠上下左右设定圆角有时会不容易控制位置，这时就可以透过“根据方向”的圆角样式来进行调整 ( 注意 start 和 end 的左右方向 )，根据方向的单一圆角权重与 border-radius 相同，有时会运用“撰写顺序”来覆写特定圆角。

使用单一圆角的语法时如果只设定单一数值，就等于是“圆角的半径”，如果个别设定 x 和 y 半径，中间使用“空白”分隔，不使用“/”分隔，下方范例展示根据方向的边框圆角效果：

线上展示：https://codepen.io/oxxo/pen/JoPMdLP

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

边框圆角的长度单位

边框圆角的半径使用“具有长度单位”的数值，下方列出支援的长度单位：

延伸阅读：长度与角度单位

下方范例使会使用四个 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>

虽然边框圆角会发生裁切现象，但边框圆角不会裁切“不可置换元素”的内容，如果边框圆角的半径太大和内容重叠，而内容又具有“背景色”，就会发生边框圆角被内容背景遮蔽的状况，虽然不可置换元素发生圆角裁切时可能会超过圆角，但仍然可以透过 overflow 的样式属性，设定内容溢出时的显示行为。

下方的范例将内容元素的背景变成有点半透明，就能看到后方边框圆角被内容遮蔽的状况，同时也会一并展示内容被裁切的效果。

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

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

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 150px;
    border: 5px solid #000;
    background: url(https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg);
    border-radius: 60px;
    margin: 10px;
  }
  .o {overflow: hidden;}
  span {background: #f00a;}  /* 背景有點透明 */
  .b span {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

半径大于宽高的边框圆角

当圆角半径比“宽高”大的时候，该半径最大值会被限缩为宽或高的数值 ( 不会超过宽或高的数值 )，透过这种特性，搭配infinity 关键字或非常大的数值，就能做出随时保持“圆形边缘”的边框圆角，下方范例会分别呈现 infinity 关键字和 99999px 数值的效果。

• 注意，使用 infinity 关键字需要乘以 1px 才会具有长度单位。
• 线上展示：https://codepen.io/oxxo/pen/pvJZzWy

<!-- HTML 程式碼 -->
拖拉改變尺寸看看
<div class="r1"></div>
<div class="r2"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    overflow: auto;  /* 設定 auto 才能手動縮放 */
    resize: both;    /* 設定可手動縮放 */
    margin: 10px;
  }
  .r1 {
    width: 150px;
    height: 50px;
    border-radius: 99999px;  /* 圓角半徑超大 */
    border: 1px solid #000;
  }
  .r2 {
    width: 450px;
    height: 150px;
    border-radius: calc(infinity * 1px);  /* 圓角半形無限大乘以 1px 才具有單位 */
    border: 1px solid #000;
  }
</style>

小结

边框圆角式设计特殊边框不可或缺的功能，许多较具特色的按钮或区块，也都会使用些许的边框圆角来加强设计感，透过这篇教学，就能完整掌握边框圆角的用法。

意见反馈