CSS Border Generator
CSS Border Generator - a browser-based developer tools utility.
Browser tool
About CSS Border Generator
Borders are four properties that interact, and corner radius is four more. Guessing values and reloading is slow; adjusting them against a live preview is not. The output is the CSS that produces what you are looking at. No sign up, and free to use. Everything is generated in the browser, which means your values are never sent anywhere.
How to use it
- Set width, style and colourPer side where the sides differ — a single bottom border is far more common in interface work than four matching ones.
- Round the cornersEach corner can take its own radius, and the preview shows immediately when a radius is larger than the box can accommodate.
- Copy the CSSLonghand or shorthand, whichever suits the stylesheet you are pasting into.
What happens when a radius is too large
If the radii on one edge add up to more than the length of that edge, the browser scales every radius on the element by the same factor until they fit. That is why a large radius on a short box produces a pill rather than the shape you specified, and why the effect appears to jump rather than clip.
What it does not do
- A border occupies layout space. Adding one changes the size of the element unless box-sizing is border-box, which is the usual cause of a layout shifting by a couple of pixels when a border appears on hover.
- Dashed and dotted rendering differs between browsers, and neither is precisely controllable from CSS.
Questions people ask
- Why does my border change the page layout?
- Because it adds to the element’s size under the default box model. Either set box-sizing: border-box, or use a transparent border of the same width in the resting state so nothing moves when it becomes visible.
- Can I have a different radius on each corner?
- Yes, and the generator sets them individually. border-radius takes up to four values, and each corner can also take separate horizontal and vertical radii for an elliptical curve.
Questions about ToolsVerse itself — privacy, cost, what happens to your files — are answered in the frequently asked questions.
Related tools
The tools people most often need alongside CSS Border Generator.
Can’t find the tool you need?
Tell us what you’re looking for and we’ll consider adding it.