CSS Border Generator

CSS borders, border-radius and outlines explained

A CSS border is drawn between an element's padding and margin and is defined by three values per side: width, style and color. The border shorthand sets all four sides at once (border: 2px solid #4f46e5), border-top and friends set one side, and border-width, border-style and border-color accept one to four values in clockwise order — top, right, bottom, left. A border is only painted when its style is not none, which is the default.

border-radius rounds the corners and also clips the background and box-shadow to the same shape. It accepts one to four values starting at the top-left corner and moving clockwise, and an optional slash introduces separate vertical radii for elliptical corners: border-radius: 50% 30% / 20% 40%. Percentages are relative to the element's width (horizontal radii) and height (vertical radii), so 50% turns a square into a circle.

outline looks similar but behaves differently: it takes no space, never shifts layout, can be pushed away from the element with outline-offset, and — in all current browsers — follows border-radius. That makes it ideal for focus indicators. This generator compares several equivalent forms and outputs the shortest correct CSS.

How to use the CSS Border Generator

1. Set the width, style and color for all sides, or untick "Same border on all sides" and pick a side to style individually.
2. Choose a radius unit and set one radius for every corner, or unlink the corners. Turn on elliptical corners for organic, blob-like shapes.
3. Optionally add an outline with its own width, style, color and offset.
4. Check the live preview, then copy the generated shorthand CSS.

Example

A card with a single accent edge and a visible keyboard focus ring:

.callout {
  border: none;
  border-left: 4px solid #4f46e5;
  border-radius: 0 8px 8px 0;
}

.callout:focus-visible {
  outline: 3px solid #a5b4fc;
  outline-offset: 2px;
}

Tips

• Borders add to an element's size unless you use box-sizing: border-box, which most CSS resets apply to every element.
• Use a large pixel radius such as 500px instead of 50% for pill buttons — 50% creates an ellipse on non-square elements.
• Never remove focus outlines without a replacement. :focus-visible lets you show a ring for keyboard users only. The Button Generator adds one automatically.
• groove, ridge, inset and outset derive their light and dark shades from the border color, so they need a width of at least 3px to be noticeable.
• For a border that follows a gradient, combine border: 2px solid transparent with two background layers, or use border-image (which ignores border-radius). Build the gradient with the CSS Gradient Generator.
• Add depth to bordered cards with the Box Shadow Generator.