无需登录 数据私有 本地保存

边框圆角生成器 - CSS Border-Radius在线生成

前端设计 生成器 border-radius CSS 圆角 生成器
41
0
0
0

CSS Border-Radius 生成器

可视化调整圆角，实时生成CSS代码

圆角控制
椭圆模式 (水平/垂直)
左上 16px
右上 16px
左下 16px
右下 16px
预设方案
直角
微圆角
标准
大圆角
超大
胶囊
圆形
不对称
实时预览
px
px
背景:
CSS 代码 
border-radius: 8px;
四个角统一圆角 8px
常见问题与知识点

border-radius 遵循顺时针顺序：左上 → 右上 → 右下 → 左下。
1个值：所有角相同；2个值：左上&右下 相同，右上&左下 相同；3个值：左上，右上&左下，右下；4个值：分别设置四个角。
使用斜杠 / 可分别设置水平和垂直半径，如 border-radius: 30px / 15px; 创建椭圆角。

在正方形元素上设置 border-radius: 50%; 即可创建完美圆形。如果元素不是正方形，使用百分比会创建椭圆形状，因为水平半径相对于宽度计算，垂直半径相对于高度计算。对于任意尺寸的元素，可使用一个足够大的像素值（如 9999px）来确保圆角覆盖整个元素。

像素(px)：固定的绝对圆角大小，不受元素尺寸影响。
百分比(%)：相对于元素尺寸计算——水平半径相对于元素宽度，垂直半径相对于元素高度。在非正方形元素上，50% 会创建椭圆形状而非正圆。百分比适合响应式设计，圆角会随元素缩放而自动调整。

使用斜杠语法 border-radius: 水平半径 / 垂直半径; 可创建椭圆圆角。例如 border-radius: 60px 30px 20px 10px / 40px 20px 30px 15px; 为每个角分别设置水平半径（斜杠前）和垂直半径（斜杠后）。这在设计有机形状、水滴效果等独特UI元素时非常有用。

当元素设置了 border-radius，其内容（包括子元素、图片等）不会自动被圆角裁剪。需要配合 overflow: hidden; 才能让子元素也遵循圆角边界。这是制作圆形头像、圆角卡片等常见UI组件的关键组合。注意：某些浏览器在硬件加速场景下，overflow: hidden + border-radius 可能有渲染问题，可添加 transform: translateZ(0); 解决。

设置一个足够大的圆角值（如 border-radius: 9999px; 或 50rem），浏览器会自动将圆角限制在元素高度的一半，从而形成胶囊形状。这种方法比精确计算高度的一半更实用，因为它能自动适应不同高度的元素，且代码简洁易维护。

border-radius 在所有现代浏览器中都得到完美支持（Chrome 5+、Firefox 4+、Safari 5+、Edge 12+、Opera 11+），无需添加浏览器前缀。即使在较旧的IE9+中也完全支持。它是CSS3中最稳定、使用最广泛的属性之一，可以放心在生产环境中使用各种高级语法（包括椭圆圆角和百分比单位）。
🔧 相关工具