跳至正文

CSS圓角生成器

可視化創建CSS border-radius並複製代碼的免費線上工具。

Preview

模式

圓角

px

CSS 代碼

border-radius: 20px;

預設

主要功能​

  • 2種模式: 全部模式、單獨角模式
  • 即時預覽: 立即查看更改
  • 精細控制: 0-200px範圍
  • 9個預設: 常用圓角樣式
  • 一鍵複製: 立即複製CSS代碼

什麼是Border Radius？​

border-radius是使元素角變圓的CSS屬性。

基本語法​

/* 所有角相同 */
border-radius: 10px;

/* 各角單獨指定 */
border-radius: 10px 20px 30px 40px;
/* 順序: 左上、右上、右下、左下 */

預設樣式​

Square (方形)​

border-radius: 0px;

銳角，經典設計

Slightly Rounded (微圓)​

border-radius: 4px;

細微圓角，精緻感

Rounded (圓角)​

border-radius: 8px;

適度圓角，最通用

Very Rounded (很圓)​

border-radius: 16px;

柔和感，親切設計

Pill (藥丸形)​

border-radius: 50px;

適合按鈕和標籤

Circle (圓形)​

border-radius: 9999px; /* 或50% */

頭像、圖標

Top Only (僅頂部)​

border-radius: 12px 12px 0 0;

模態框頭部，卡片頂部

Bottom Only (僅底部)​

border-radius: 0 0 12px 12px;

模態框底部，下拉菜單

Blob (不規則)​

border-radius: 30px 60px 30px 60px;

有機形狀，獨特設計

瀏覽器兼容性​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ 所有移動瀏覽器

相關工具​