2025 iThome 鐵人賽
分享至
邊框圓角 border-radius 是邊框的特殊樣式，透過不同的半徑圓角，調整四個角落的圓角樣式，讓元素邊框更具設計感，這個單元會詳細介紹 border-radius 的用法，以及運用邊框圓角做出圓形、半圓形或不同半徑圓角的效果。
影片重點：
00:00:52 認識 border-radius 00:02:02 border-radius 邊框圓角 00:03:54 border-radius 邊框圓角 ( x/y 半徑 ) 00:05:57 border-*-radius 單一圓角 ( 基本上下左右 ) 00:08:00 border-*-radius 單一圓角 ( 根據方向 ) 00:09:40 邊框圓角的長度單位 00:12:09 連接不同樣式的邊框圓角 00:13:40 邊框圓角的裁切現象
相關參考：
教學文：CSS border-radius 邊框圓角 影片連結：https://www.youtube.com/watch?v=RpsnqCwQ0kc
更多參考： Youtube 頻道：https://www.youtube.com/@steam.oxxostudio CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html
更多參考：
IT邦幫忙
iThome鐵人賽
看影片追技術