About the CSS Border Generator
A border is three values in a trench coat. Width, style and colour can each be set on their own or squeezed into the border shorthand, and only the style value is genuinely required: a declaration with a width and a colour but no style paints nothing at all, because the initial style is none. That single rule explains most missing borders, so the shorthand is the default here and always includes a style keyword.
The sides dropdown switches between the shorthand and its four per edge variants. Picking top and bottom writes border-top and border-bottom and leaves the vertical edges untouched, which is how table row separators and section dividers are usually built. Turning the shorthand off expands everything into border-width, border-style and border-color triplets, which is handy when a theme file needs to override one part later without repeating the rest.
Two extras come along for the ride. Corner radius is added when it is above zero, because a border and its radius almost always ship together, and box-sizing: border-box is offered because a border added to a fixed width element pushes the content box inward unless the box model is switched. The double style needs at least three pixels of width before the two lines and their gap can be drawn. For rounding without a visible edge, the Border Radius Generator handles corners on their own.
How to use
- Choose a style first. Solid, dashed and dotted cover most work; double needs three pixels or more to show its gap.
- Set the width and colour, then pick which sides get the border.
- Add a corner radius if you want rounded edges, and untick the shorthand if your theme needs separate longhand declarations.
- Copy the rule or download it as a .css file.
Common questions
- Why is my border invisible?
- Almost always because no style keyword was set. A border needs a style such as solid before the browser draws anything, whatever width and colour you give it.
- What is the difference between border and outline?
- A border takes up space in the box model and follows the corner radius. An outline is painted outside the box, never affects layout, and is what focus rings use.
- How do I make a one pixel border look crisp on retina screens?
- Keep the width at 1px and let the device pixel ratio handle it. Fractional widths such as 0.5px are rounded inconsistently between engines.
- Can I use a gradient as a border colour?
- Not through border-color. Use border-image with a gradient, or paint the gradient on a wrapper and inset the inner element by the border width.