CSS边框与轮廓生成器
可视化构建CSS边框、轮廓和盒子阴影，带实时预览和即时代码输出。
关于此工具
用于CSS边框和轮廓样式的可视化构建工具。控制边框宽度、样式、颜色和每个角的圆角，或单独自定义每条边（上、右、下、左）。添加带可配置偏移量的轮廓，并使用box-shadow作为边框替代方案。实时预览即时更新，生成的CSS始终可以复制。
使用方法
- 1 第一步：在「所有边」或「单独边」模式之间选择，统一或逐边控制边框。
- 2 第二步：使用控件调整边框宽度、样式和颜色，并统一或逐角设置圆角。
- 3 第三步：启用轮廓或盒子阴影部分，为元素添加这些样式并配置其选项。
- 4 第四步：点击「复制CSS」复制生成的CSS代码，然后粘贴到您的项目中。
Three different ways to draw an edge
CSS gives you three distinct properties for putting an outline on a box, and this tool builds all three so you can see how they differ side by side: border, outline, and box-shadow. They look superficially similar but behave very differently, and choosing the wrong one is one of the most common sources of layout bugs. The whole point of this generator is to let you adjust values visually and copy the exact, correct CSS — including the per-side and per-corner shorthands that are tedious to write by hand.
How border, outline, and box-shadow actually differ
| Property | Takes up space? | Follows border-radius? | Per-side control? |
|---|---|---|---|
border | Yes — adds to the box's size | Yes | Yes (top/right/bottom/left) |
outline | No — drawn outside the box, ignores layout | No (traditionally rectangular) | No — all four sides together |
box-shadow | No — painted outside the box model | Yes | No, but supports blur, spread, and stacking |
The practical consequence: a 4px border makes an element 8px wider and taller (4px on each side), which can shift everything around it. An outline or box-shadow of the same thickness changes nothing about the layout — they are painted on top of, or outside, the box without reserving space. This is exactly why a focus ring is almost always an outline: it can appear and disappear as you tab through a form without making the page jump.
Building a border: width, style, color, radius
In All sides mode you set one width, one style, and one colour, producing the compact shorthand border: 2px solid #3b82f6;. Switch to Individual sides and each of the four edges gets its own controls, emitting border-top, border-right, and so on — useful for designs like a coloured left accent bar on a card. Eight border styles are available: solid, dashed, dotted, double, plus the four 3D-look styles groove, ridge, inset, and outset (whose effect depends on the border colour and is mostly a retro aesthetic).
Border radius rounds the corners. In "All" mode one slider rounds all four corners equally; in "Per corner" mode you set each corner independently, which generates the four-value shorthand. The order matters and is easy to get wrong by hand: border-radius reads top-left, top-right, bottom-right, bottom-left — clockwise from the top-left. The tool writes that order for you.
A worked example
Suppose you want a card with a solid blue border, gently rounded corners, and a soft drop shadow for depth. Set the border to width 2, style solid, colour #3b82f6. Set the radius slider to 12. Enable Box Shadow and dial in X offset 4, Y offset 4, blur 8, spread 0, with a semi-transparent black. The tool produces:
border: 2px solid #3b82f6;border-radius: 12px;box-shadow: 4px 4px 8px 0px #00000080;
Read the shadow's four numbers as horizontal offset, vertical offset, blur radius, and spread. The #00000080 colour is black at 50% opacity — the tool builds that alpha from the opacity slider, appending the hex alpha pair (80 ≈ 50%) to the chosen colour. Tick Inset and the same shadow is painted inside the box instead, giving a pressed or recessed look.
Understanding outline-offset
The outline section adds an outline plus an outline-offset. Offset is the gap between the element's edge and its outline: a positive value pushes the outline outward, away from the box, creating a halo with a visible gap; a negative value pulls it inward, over the element's own edge. Because the outline does not affect layout, increasing the offset never disturbs surrounding content — it just expands the ring.
Tips and common mistakes
- Don't use border for focus states. A border resizes the element when it appears, jolting the layout. Use outline (or box-shadow) for focus and hover rings so nothing shifts.
- Outline corners stay square. Even with a rounded
border-radius, a traditional outline is drawn as a rectangle and will not follow the curve. If you need a rounded ring, reach for box-shadow with zero blur and some spread instead. - Box-shadow is a layout-free border substitute. A trick worth knowing:
box-shadow: 0 0 0 2px #3b82f6;— zero offset, zero blur, 2px spread — draws what looks like a 2px border that adds no size and respects border-radius. The generator's spread control lets you build exactly that. - Watch the shorthand order on per-corner radius. If your rounded corners end up on the wrong side, you have almost certainly typed the values in the wrong sequence by hand; the per-corner mode here labels each input so the output is correct.
- Match the style to the colour. The 3D styles (
groove,ridge,inset,outset) derive their highlight and shadow from the border colour. They look broken on a pure black or white border and only show their bevel effect with a mid-tone colour.
Privacy note
This generator runs entirely in your browser. It computes the CSS and updates the live preview locally; nothing you type or design is sent to a server, so it works fully offline.