CSS Border & Outline Generator
Visually build CSS borders, outlines, and box-shadows with live preview and instant code output.
About this tool
A visual builder for CSS border and outline styles. Control border width, style, color, and per-corner border-radius, or customize each side (top, right, bottom, left) individually. Add outlines with configurable offset, and use box-shadow as a border alternative. The live preview updates instantly and the generated CSS is always ready to copy.
How to use
- 1 Step 1: Choose between 'All sides' or 'Individual sides' mode to control borders uniformly or per-side.
- 2 Step 2: Adjust border width, style, and color using the controls, and set border-radius per corner or uniformly.
- 3 Step 3: Enable the Outline or Box Shadow sections to add those styles to your element and configure their options.
- 4 Step 4: Click 'Copy CSS' to copy the generated CSS code, then paste it into your project.
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.