CSS Border Generator
Pick a border style, width, color and corner radius — generate border and border-radius CSS with live preview.
CSS generated is free to use — no attribution required.
How do you use the CSS border generator?
Pick a border style, set the width and color, then adjust the corner radius. The preview shows all four sides together. If you only need rounded corners without a visible border, the dedicated border radius generator gives you per-corner and elliptical control that this tool does not.
What is the CSS border syntax?
border is shorthand for three properties in any order: border: 2px solid #6366f1 sets width, style and color at once. The individual longhands are border-width, border-style and border-color.
The style is the load-bearing part. Width and color both have usable defaults — medium and the element’s currentColor — but the default style is none, so a border with no style declared draws nothing at all.
Why is my border not showing up?
Almost always because border-style is missing. Writing border-width: 2px; border-color: red without a style produces no border, silently, because the initial style is none.
The other common cause is a zero-width or transparent border inherited from a reset, or an element with no height. Setting the shorthand — which always includes a style — avoids the whole class of problem.
What are the CSS border-style values?
There are eight visible styles plus two invisible ones. solid, dashed and dotted are self-explanatory. double draws two lines with a gap, sized so the total equals the border width. groove, ridge, inset and outset fake a bevel by darkening and lightening the color, and look distinctly dated outside of retro designs.
none and hidden both draw nothing and differ only in table border-conflict resolution, where hidden wins over neighbouring borders.
How do you style one side of a border?
Each side has its own shorthand — border-top, border-right, border-bottom, border-left — and each of those has width, style and color longhands. A bottom rule under a heading is border-bottom: 1px solid #1c1c26.
A common pattern is a full border plus one override: declare border: 1px solid first and then border-left: 4px solid for an accent stripe. Order matters, since the shorthand resets everything it covers.
Do borders change the size of an element?
Under the default box-sizing: content-box, yes: a border adds to the element’s rendered width and height, so adding one on hover shifts the layout.
With box-sizing: border-box — which most stylesheets set globally — padding and border are absorbed into the declared width instead. If you still need a hover ring with no layout impact at all, use a box-shadow with spread, which is painted outside the box model entirely.
What is the difference between border and outline?
A border is part of the box model and occupies space. An outline is drawn outside it, takes no space, and therefore never causes a reflow — which is exactly why it is the default focus indicator.
Outlines also cannot be styled per side. In current browsers an outline does follow border-radius, so it no longer draws a rectangle around a rounded button the way it once did, and outline-offset lets you push it away from the edge.
What are logical border properties?
border-inline-start and border-block-start replace left and top with directions relative to the writing mode. In left-to-right English border-inline-start is the left border; in a right-to-left language it becomes the right one automatically.
For anything that might be translated, the logical forms save maintaining a mirrored stylesheet. They are supported across all current browsers.
How do you create a gradient border?
border-color only accepts colors, so a gradient border needs a workaround. The cleanest modern approach uses two backgrounds with background-clip: a solid one clipped to the padding box and a gradient clipped to the border box, with a transparent border letting the gradient show through.
The alternative is border-image, which accepts a gradient directly via border-image-source, but it does not follow border-radius — so it is unsuitable for anything with rounded corners.
What is the browser compatibility for CSS borders?
Borders are as old as CSS and need no compatibility thought — all styles, per-side properties and border-radius are universally supported without prefixes. Logical properties and background-clip are newer but available in all current browsers.