CSS 边框生成器

可视化调整边框的宽度、样式、颜色与圆角，实时预览元素边框效果，一键生成标准的 border 与 border-radius 样式代码，全部在浏览器本地完成。

边框参数已就绪

边框宽度

边框样式

边框颜色

#3366ff

圆角半径

拖动滑块即可实时预览；边框宽度为 0 或样式为 none 时不显示边框。

实时预览与代码

边框预览

生成的 CSS 将显示在这里。

使用规则

border 简写语法：border: width style color;，三个取值顺序可任意但常用顺序固定。
border-radius 用于设置圆角，可使用像素、百分比或简写多值。
dotted 与 dashed 的显示效果因浏览器实现略有差异，本工具按标准输出。
边框会增大元素的实际盒模型尺寸，可配合 box-sizing: border-box 使用。
本工具完全在浏览器本地运行，输入数据不会上传到任何服务器。