protonvpn

CSS Border-radius 指南, 不是只能畫圓角

你以為它只能畫圓角，其實它能做的事多得多

border-radius 通常用來做這些事：

  • 按鈕變圓一點
  • 卡片看起來柔和一點
  • border-radius: 50% 畫一個圓

其實它還能做更多： border-radius 其實是一個「形狀語言」

試試看下面這個實驗，你會發現很多「看起來很設計感的形狀」，其實只是 CSS。

目錄

為什麼要重新認識 border-radius？

在現代 UI 裡，圓角早就不是裝飾，而是結構的一部分：

  • 設計系統會定義 radius token（sm / md / lg），確保視覺一致性
  • 元件之間的「柔軟程度」需要一致，影響整體品牌感受
  • 不同裝置尺寸下，圓角感覺要穩定，避免在小螢幕上過於突兀

border-radius 其實有很多實用功能，但可能比較少被注意到。

這篇文章會介紹：

  • ✅ 它的「計算模型」和瀏覽器行為
  • ✅ 斜線語法，用來創造有機形狀
  • ✅ 瀏覽器什麼時候會自動調整值，以及為什麼
  • ✅ 如何有意識地設計形狀，而不只是「試試看哪個值好看」
  • ✅ 常見的實戰技巧和需要注意的地方

border-radius 的基本語法

一個值

/* 最簡單的用法：四個角使用相同的半徑值
 * 適合：統一的設計風格，快速原型開發 */
border-radius: 12px;
12px

👉 四個角都一樣，最常用也最簡單。

兩個、三個、四個值的規則

兩個值：

/* 對角線模式：第一個值給左上和右下，第二個值給右上和左下
 * 適合：創造對角線節奏，增加視覺動感 */
border-radius: 8px 16px;
8px 16px

實際展開是：

  • 左上 / 右下 → 8px（對角線）
  • 右上 / 左下 → 16px（對角線）

三個值：

/* 不對稱模式：左上獨立，右上和左下相同，右下獨立
 * 適合：創造「方向感」，引導視線流向 */
border-radius: 8px 16px 24px;
8px 16px 24px

實際展開是：

  • 左上 → 8px（獨立值）
  • 右上 / 左下 → 16px（共享值）
  • 右下 → 24px（獨立值）

四個值：

順序永遠是：左上 → 右上 → 右下 → 左下（順時針）

/* 完全控制模式：每個角都可以獨立設定
 * 適合：精細的設計調整，創造複雜的視覺節奏
 * 記憶技巧：從左上開始，順時針方向 */
border-radius: 8px 12px 20px 4px;
8px 12px 20px 4px

💡 小提醒：如果視覺效果不如預期，可能是角順序記錯了。記住：從左上開始，順時針方向！

單位很重要：px vs %

px：固定幾何

/* 固定像素值：無論元素大小如何變化，圓角半徑都保持不變
 * 適合：按鈕、卡片等需要「一致視覺大小」的元件 */
border-radius: 24px;
24px

特點：

  • ✅ 不會隨容器比例變
  • ✅ 適合元件設計（button / card）- 保證一致的視覺大小
  • ✅ 在設計系統中容易維護（固定的 token 值）

%：相對於「盒子尺寸」

/* 百分比值：相對於元素自己的寬度和高度計算
 * 50% 表示：水平半徑 = 寬度的 50%，垂直半徑 = 高度的 50% */
border-radius: 50%;
50%
50% (長方形)

重點不是「50% 很圓」，而是：

百分比是根據「盒子自己的寬高」算的

  • 正方形 → 圓（因為寬高相等）
  • 長方形 → 膠囊（pill）（因為寬高不同）

實用技巧：

📌 為什麼有些人會用 9999px？

因為無論元素多大，9999px 都保證會讓元素變成最大可能的圓角（通常就是圓形或膠囊形）。這是一個「懶人技巧」，但要注意：

  • ✅ 優點：不需要計算，總是最大圓角
  • ⚠️ 缺點：不夠語義化，在設計系統中不推薦

/ 斜線語法：border-radius 的真正威力

這個語法比較少被提到，但它是創造「有機形狀」的關鍵。

/* 斜線語法：分開控制水平和垂直半徑
 * 格式：水平半徑 / 垂直半徑
 * 這個例子：所有角的水平半徑是 40px，垂直半徑是 20px */
border-radius: 40px / 20px;
40px / 20px

代表：

  • 水平方向半徑：40px（X 軸）
  • 垂直方向半徑：20px（Y 軸）

關鍵理解： 每個角其實是一段橢圓弧，不是圓弧。 當水平和垂直半徑不同時，就會形成橢圓形的圓角，這是創造各種有機形狀的基礎。

完整語法

/* 完整語法：8 個值控制 4 個角的 X 和 Y 半徑
 * a b c d：四個角的 X 軸（水平）半徑
 * e f g h：四個角的 Y 軸（垂直）半徑
 * 順序：左上 → 右上 → 右下 → 左下（順時針） */
border-radius: a b c d / e f g h;
  • / 前：X 軸半徑（水平方向）
  • / 後：Y 軸半徑（垂直方向）
  • 每個角都可以獨立控制，創造無限可能
a
b
c
d
e
f
g
h
X軸: a b c d
Y軸: e f g h

📌 這就是很多「有機形狀」的來源。

瀏覽器其實會「偷偷修正」你的 radius

如果你這樣寫：

width: 100px;
height: 50px;
/* 你設定了 80px，但元素寬度只有 100px */
border-radius: 80px;

會發生什麼？

實際上：

  • 瀏覽器會自動 clamp（限制）半徑值
  • 確保圓角不會超過元素尺寸的一半
  • 在這個例子中，實際生效的是 50px（高度的一半）

這個行為是 CSS 規範中的正常機制，不是 bug。

計算規則：

  • 水平半徑不能超過 width / 2
  • 垂直半徑不能超過 height / 2
  • 如果超過，瀏覽器會自動縮放兩個半徑，保持比例

💡 實用技巧：當你輸入很大的 radius 值時，畫面看起來「卡住不動」，是因為瀏覽器已經自動調整到最大可能值了。如果你想要「最大圓角」，直接設定一個很大的值（如 9999px）即可。

設計感十足的圓角應用

1. 膠囊按鈕 - 現代 UI 的經典

<button class="capsule-button">立即下載</button>
.capsule-button {
  /* 內距：垂直 12px，水平 24px，創造舒適的點擊區域 */
  padding: 12px 24px;
  border: none;
  
  /* 關鍵技巧：使用固定 px 值，約為按鈕高度的一半
   * 這樣可以創造完美的膠囊形狀，不受文字長度影響
   * 如果使用 50%，在按鈕寬度變化時會變成橢圓形 */
  border-radius: 25px;
  
  /* 漸層背景增加視覺吸引力 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 500;
  
  /* 陰影增加深度感，顏色與背景色調一致 */
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  
  /* 平滑過渡效果，讓互動更自然 */
  transition: all 0.3s ease;
  cursor: pointer;
}

.capsule-button:hover {
  /* 微妙的向上移動，創造「浮起」的視覺效果 */
  transform: translateY(-2px);
  
  /* hover 時增強陰影，強化浮起感 */
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

2. 不對稱設計卡片 - 創造視覺層次

<div class="asymmetric-card">
  <div class="card-title">不對稱設計</div>
  <p>利用不同大小的圓角創造視覺節奏，讓設計更有個性和現代感。</p>
</div>
.asymmetric-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* 不對稱圓角模式：左上/右下大，右上/左下小
   * 順序：左上 → 右上 → 右下 → 左下（順時針）
   * 這種模式創造出「對角線節奏」，比完全對稱更有動感 */
  border-radius: 20px 8px 20px 8px;
  
  padding: 24px;
  
  /* 柔和的陰影，顏色與背景呼應 */
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  color: white;
}

.card-title {
  margin: 0 0 12px 0;
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.asymmetric-card p {
  margin: 0;
  /* 使用 rgba 而非 opacity，避免影響子元素 */
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  font-size: 14px;
}
不對稱設計

利用不同大小的圓角創造視覺節奏，讓設計更有個性和現代感。

3. 漸層背景 + 圓角 - 創造深度感

<div class="gradient-depth-card">
  <div class="card-title">漸層深度效果</div>
  <p>結合漸層背景和微妙的邊框效果，創造出立體的視覺深度。</p>
</div>
.gradient-depth-card {
  /* 三色漸層：從藍紫到粉紫，創造豐富的視覺層次 */
  background: linear-gradient(135deg,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%);
  
  /* 統一的圓角，讓整體更和諧 */
  border-radius: 16px;
  padding: 20px;
  
  /* 相對定位，讓 ::after 偽元素可以絕對定位 */
  position: relative;
  color: white;
  
  /* 深色陰影增加立體感 */
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.gradient-depth-card::after {
  content: '';
  position: absolute;
  
  /* inset: 0 等同於 top: 0; right: 0; bottom: 0; left: 0;
   * 讓偽元素完全覆蓋父元素 */
  inset: 0;
  
  /* 重要：繼承父元素的圓角，確保邊框也跟著圓角 */
  border-radius: 16px;
  
  /* padding 創造邊框的「厚度」 */
  padding: 2px;
  
  /* 半透明白色漸層，模擬高光效果 */
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  
  /* mask 技巧：只顯示邊框區域，隱藏中間內容
   * content-box 只顯示 padding 區域（即邊框）
   * exclude 模式讓邊框區域可見，內容區域透明 */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.card-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

.gradient-depth-card p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.5;
  font-size: 14px;
}
漸層深度效果

結合漸層背景和微妙的邊框效果，創造出立體的視覺深度。

4. 動畫過渡 - 互動體驗

<div class="interactive-morph">Hover Me</div>
.interactive-morph {
  width: 120px;
  height: 120px;
  
  /* 對角漸層，從紅到青，視覺對比強烈 */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  
  /* 初始狀態：小圓角 */
  border-radius: 20px;
  
  /* 關鍵：只對 border-radius 做動畫，使用緩動函數
   * cubic-bezier(0.4, 0, 0.2, 1) 是 Material Design 的標準緩動
   * 創造出「先快後慢」的自然動畫效果 */
  transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3);
}

.interactive-morph:hover {
  /* hover 時變成大圓角（接近圓形）
   * 因為元素是正方形，60px 約等於寬度的一半，形成圓形 */
  border-radius: 60px;
  
  /* 同時放大，增強互動感 */
  transform: scale(1.1);
}
Hover Me

滑鼠移到上面看看動畫效果

5. 多層次圓角設計

<div class="layered-design">
  <div class="inner-content">
    <div class="accent-element"></div>
    <div class="card-title">多層次設計</div>
    <p>不同大小的圓角創造視覺層次，讓介面更有深度和趣味。</p>
  </div>
</div>
.layered-design {
  /* 外層：大圓角，作為容器的「框架」 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24px;
  
  /* padding 創造內外層之間的「間隙」 */
  padding: 16px;
  position: relative;
  color: white;
}

.inner-content {
  /* 內層：較小的圓角，形成層次對比
   * 24px vs 16px 的差異創造視覺深度 */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  
  /* 陰影讓內層「浮」起來 */
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  position: relative;
  
  /* 毛玻璃效果（如果瀏覽器支援） */
  backdrop-filter: blur(10px);
}

.accent-element {
  position: absolute;
  
  /* 負值定位，讓元素「溢出」容器邊界
   * 創造出「貼紙」或「標籤」的視覺效果 */
  top: -8px;
  right: -8px;
  
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  
  /* 中等大小的圓角，與其他層次形成對比 */
  border-radius: 12px;
  
  /* 強烈的陰影，讓這個元素更突出 */
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
  
  /* 白色邊框，與背景形成對比，增強視覺分離 */
  border: 3px solid white;
}

.card-title {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.layered-design p {
  margin: 0;
  color: #666;
  line-height: 1.5;
  font-size: 14px;
}
多層次設計

不同大小的圓角創造視覺層次，讓介面更有深度和趣味。

小挑戰

試試只用 border-radius 創造這些形狀：

  1. 水滴形狀：

    /* 技巧解析：
 * X軸：四個角都是 50%（標準圓角）
 * Y軸：上方 60%（較圓），下方 40%（較尖）
 * 這樣創造出上圓下尖的水滴效果 */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

  2. 有方向感的卡片：

    /* 對角線模式：左上/右下大圓角，右上/左下小圓角
 * 創造出「指向性」的視覺效果，適合用在需要引導視線的地方 */
border-radius: 16px 4px 16px 4px;
    方向感卡片

  3. 柔軟的 blob（有機形狀）：

    /* 進階技巧：使用百分比創造不規則的有機形狀
 * X軸：40% 60% 60% 40% - 左右不對稱
 * Y軸：60% 30% 60% 40% - 上下也不對稱
 * 這種組合創造出「柔軟、有機」的視覺感受
 * 適合用在需要「親和力」的設計中 */
border-radius: 40% 60% 60% 40% / 60% 30% 60% 40%;

重點總結

  • border-radius 是一個形狀語言，不只是簡單的圓角裝飾
  • 斜線語法 / 是核心：水平和垂直半徑可以分開控制，創造橢圓和有機形狀
  • 瀏覽器會自動 clamp 數值：確保圓角不會超出元素範圍，這是正常機制
  • 單位選擇很重要：
    • px：固定幾何，適合元件設計，保證一致的視覺大小
    • %：相對尺寸，適合響應式設計，但要注意比例變化
  • 好的圓角來自有意識的選擇：理解計算模型、單位差異和瀏覽器行為
  • 實戰技巧：
    • 膠囊按鈕：使用固定 px 值（約為高度一半）
    • 最大圓角：使用 9999px 或 50%（取決於需求）
    • 有機形狀：使用百分比配合斜線語法
    • 多層次設計：外層大圓角，內層小圓角，創造深度

延伸學習

想要更深入？試試這些進階主題：

  • 與 clip-path 結合：創造更複雜的形狀
  • 動畫技巧：讓形狀在 hover 時平滑變形
  • 響應式圓角：使用 CSS 變數和媒體查詢
  • 效能考量：大量圓角元素的優化技巧

希望這些內容對你有幫助。🎨