CSS Border Generator
Set the width, style and colour of every side, or all four at once. Add a gradient border or a focus outline, see how much space the border adds, and check it is visible enough, then copy the shortest CSS that does it.
Preview
- #0EA5E9: 2.77:1 against the page, 2.77:1 against the box. Below 3:1: fine for decoration, too faint if it is the only outline of a field or button.
Space it takes
width: 240px sets the content only. On screen the box is 240 + 32 padding + 4 border = 276px wide.
.box {
border: 2px solid #0EA5E9;
border-radius: 8px;
}The border shorthand and side order
border: 2px solid #0EA5E9 sets width, style and colour on all four sides; the three parts can come in any order. When the sides differ, the longhands border-width, border-style and border-color each take one to four values, read clockwise from the top. The generator always writes the shortest form that means the same thing.
| You write | Top | Right | Bottom | Left |
|---|---|---|---|---|
| border-width: 2px | 2px | 2px | 2px | 2px |
| border-width: 2px 4px | 2px | 4px | 2px | 4px |
| border-width: 2px 4px 6px | 2px | 4px | 6px | 4px |
| border-width: 2px 4px 6px 8px | 2px | 4px | 6px | 8px |
A shorthand also resets what it leaves out. border: solid sets the width back to medium (3px in every current browser) and the colour to currentcolor, the text colour. That is why a later border line can undo an earlier border-color.
What each style draws
| Style | Looks like | Notes |
|---|---|---|
| solid | One continuous line | The default choice for cards and fields |
| dashed | Short dashes | Dash length is chosen by the browser and differs between them |
| dotted | Dots as wide as the border | At 1px the dots are single pixels and read as a faint grey line |
| double | Two lines with a gap | Needs 3px or more: each line and the gap get a third |
| groove / ridge | Carved in / raised | Shades are derived from your colour; best at 4px and up |
| inset / outset | Box pressed in / popped out | Old-style button look |
| none / hidden | No border, and the width counts as 0 | The starting value, so a width alone shows nothing |
How much space a border takes
By default (box-sizing: content-box), width means the content area only, and padding and border are added outside it. A card with width: 240px, 16px padding and a 4px border is 240 + 32 + 8 = 280px wide on screen. With box-sizing: border-box it stays 240px and the content shrinks to 200px. Most projects set border-box on every element for exactly this reason, so that adding a border never breaks a layout.
A border that appears only on hover or focus still moves things around if it changes the width. Either keep the same width in both states and change only the colour (start with border-color: transparent), or use an outline or an inset box-shadow, neither of which takes up space.
Borders people can actually see
WCAG 2 success criterion 1.4.11 asks that the visual parts needed to identify a control, such as the outline of a text field, have a contrast ratio of at least 3:1 against the colours next to them. A decorative card border is exempt; the border of an input with no background of its own is not, because it is the only thing showing where to type.
Pale greys are the usual problem. On white, #CBD5E1 scores about 1.5:1 and #94A3B8 about 2.6:1; the first grey to pass 3:1 is around #949494, and the "Input field" preset uses #767676 (4.5:1). The checks under the preview test each border colour against both the page and the box background, since a border sits between the two.
Border, outline or box-shadow?
| border | outline | box-shadow (inset or spread) | |
|---|---|---|---|
| Takes up space | Yes | No | No |
| Different per side | Yes | No | Only by offset tricks |
| Follows border-radius | Yes | Yes, in current browsers | Yes |
| Gap from the box | No | outline-offset | No |
| Shown in forced-colours mode | Yes | Yes | No |
That last row is why focus indicators should be outlines rather than shadows: Windows high-contrast mode removes box shadows, so a shadow-only focus ring disappears for the people who most need it. WCAG 2.2's AAA criterion 2.4.13 describes a strong indicator as at least as large as a 2px line around the control with 3:1 contrast between its focused and unfocused states. Use :focus-visible so the ring appears for keyboard users without flashing on every mouse click.
Gradient borders
border-color only takes plain colours, so gradient borders need a workaround, and the generator picks one based on the rounding:
- Square corners:
border-image: linear-gradient(…) 1. Short and supported everywhere, but border-image ignoresborder-radiuscompletely, so the corners stay sharp. - Rounded corners: a transparent border plus two backgrounds, the box colour clipped to
padding-boxon top and the gradient clipped toborder-boxunderneath. The gradient only shows through the border ring. The catch is that the box needs a solid background colour, which the generator takes from "Box background".
When the border does not show
| Symptom | Cause | Fix |
|---|---|---|
| No border at all | Only border-width or border-color was set; the style is still none | Add a style, or use the border shorthand |
| Border the wrong colour | No colour given, so it uses currentcolor (the text colour) | Set border-color |
| Layout jumps on hover | The border width changes between states | Keep the width, change the colour, or use outline |
| Rounded corners are square | border-image is in use | Use the padding-box / border-box background method |
| Table cells show double lines | Each cell draws its own border | border-collapse: collapse on the table |
Frequently asked questions
How do I add a border to one side only?
Untick "Same on all four sides" and give only that side a width, or write it directly: border-left: 4px solid #0EA5E9. The generator writes the shortest equivalent, such as border-width: 0 0 0 4px.
How do I make a border inside the box instead of outside?
With box-sizing: border-box the border is drawn inside the declared width. For a line that sits fully inside without affecting layout, use box-shadow: inset 0 0 0 2px #0EA5E9.
Can a border be thinner than 1px?
Browsers accept 0.5px and draw it as a hairline on high-density screens, but round it up to 1 device pixel elsewhere. A 1px line in a lighter colour is more predictable.
Why do dashed borders look different in each browser?
The specification leaves dash and gap length to the browser. For exact spacing, draw the line with a repeating-linear-gradient background or an SVG instead.
What does border: none vs border: 0 do?
Both remove the border. none sets the style (width then counts as 0); 0 sets the width. Either works; border: 0 is shorter.
Do borders work on inline elements like span?
Yes, but they wrap each line fragment separately and the top and bottom borders do not push lines apart. Use display: inline-block for a box that behaves as one piece.
Sources
- W3C: CSS Backgrounds and Borders Module Level 3: border properties, styles, medium width, border-image
- MDN: border: shorthand behaviour and initial values
- MDN: border-image: gradient sources and its interaction with border-radius
- MDN: outline: outline and outline-offset
- MDN: box-sizing: content-box and border-box
- W3C WAI: Understanding SC 1.4.11 Non-text Contrast: 3:1 for user interface component boundaries
- W3C WAI: Understanding SC 2.4.13 Focus Appearance: 2px perimeter and 3:1 change of contrast (AAA)
Related Tools
Build and preview common CSS Grid layout patterns.
Build linear and radial gradients with custom color stops.
Remove, replace, and export image metadata.
Generate and inspect solid background-color declarations.
Generate gradient and image background-image CSS.
Generate uniform, corner, and elliptical border-radius CSS.