This free border CSS generator lets you build the CSS border shorthand visually and see the result update instantly. Set a single width, style, and color for all four sides, or toggle individual targeting to give the top, right, bottom, and left edges their own values. Choose from every standard border style (solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden), pick colors with the built-in color picker, then copy the generated CSS straight into your stylesheet. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What is the CSS border property?

The border property is shorthand for setting an element's border-width, border-style, and border-color in one declaration, for example border: 2px solid #333. It draws a line around the element between its padding and margin.

How do I set a different border on just one side?

Use the side-specific properties like border-top, border-right, border-bottom, or border-left, each accepting its own width, style, and color. In this tool, enable "Target individual border" to configure each edge separately.

Why isn't my border showing up?

A border needs a border-style value to render; width and color alone are not enough. The default style is none, so setting only border-width or border-color produces no visible border. Choose a style such as solid, dashed, or dotted.

What is the difference between border styles like groove, ridge, inset, and outset?

These are 3D styles that use the border color to fake depth: groove looks carved in, ridge looks raised, inset makes the whole box look sunken, and outset makes it look embossed. The effect is subtle and depends on the border color and width.