Choose a border width, style and colour for the whole box, or switch to different values for each side, then round the corners all at once or one by one. The tool writes the shortest correct CSS, using the single border shorthand when every side matches. It does not draw the box for you, so the guide explains what each style looks like and how the radius shorthand reads.
Solid is a continuous line and the one you will use most. Dashed is a row of short segments and dotted is a row of round or square dots, depending on the browser. Double draws two thin lines with a gap, and needs a width of at least 3 pixels to show both.
Groove, ridge, inset and outset fake a three-dimensional bevel by drawing the border in two shades of the colour you chose. They look dated on modern flat designs, but they can still be handy for form fields and old-style panels.
The border sits between the padding and the margin, and its width counts toward the element's size unless the box-sizing property is set to border-box, which most modern stylesheets do. If your boxes become wider after adding a border, that is why.
Corner radius clips the background and the border to the rounded shape, but it does not clip the content unless you also set overflow to hidden. An image inside a rounded card needs its own radius or the card's overflow hidden, otherwise its square corners poke out.
The border property takes a width, a style and a colour, such as 2px solid #4f98fb. Without a style, nothing is drawn, because the default style is none.
Four values are listed clockwise from the top: top, right, bottom, left. Three values are top, left and right together, bottom. Two values are top and bottom together, then left and right together. One value applies to all four sides. The tool collapses repeats automatically, so 4px 1px 1px 1px is written 4px 1px 1px.
The four values start at the top left and go clockwise: top left, top right, bottom right, bottom left. With 24px 4px, the top left and bottom right corners get 24px and the other two get 4px.
A pixel radius is a fixed size. A percent radius is relative to the box: 50% means each corner rounds by half the width and half the height, so a square becomes a circle and a rectangle becomes an ellipse.
The usual causes are a width of zero, a style of none, or a colour that matches the background. Another cause is a rule with a higher specificity elsewhere in your stylesheet overriding it.
Related: CSS shadow generator, CSS layout generator, Hex colour picker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.