自定义 CSS 边框生成器

调整 CSS 边框的粗细、样式、颜色和圆角 —— 统一设置或逐边设置 —— 实时预览效果,然后复制可直接使用的代码。100% 本地处理 —— 不会向服务器发送任何数据。

示例:

四边使用相同粗细

粗细(px)

样式

颜色

圆角半径(px)

CSS 代码

border: 3px solid #2563eb;
border-radius: 8px;

工作原理

CSS 边框结合了三种信息:粗细、线条样式和颜色,还可以通过 border-radius 进行圆角处理。此工具让您可以在四边统一设置这些值,或分别为每一边独立设置,并提供即时的视觉效果,方便您在复制代码前确认效果。

这四种样式都是基于所选颜色模拟出的 3D 浮雕效果:"groove"给人凹槽的感觉,"ridge"给人凸起边缘的感觉,"inset"给人凹陷边框的感觉,"outset"给人凸出边框的感觉;确切的渲染效果取决于浏览器和所使用的背景颜色。

border 简写属性不允许为每一边设置不同的粗细;要实现非对称效果(上边粗、两侧细),需要使用详细的属性,如 border-top-width、border-right-width 等,正如此工具在禁用"相同粗细"选项时所做的那样。

不会向服务器传输任何数据:预览和代码均直接在您的浏览器中生成。