CSS Border Radius Generator

Set the CSS border radius sizes you would like as well as the style (width, dotted, dashed solid etc.) and copy the generated code.

All corners 3px

Top left 3px

Top right 3px

Bottom left 3px

Border width 1px

Border style

Border colour

Background colour

This what your CSS border radius will look like

CSS code

border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border: 1px solid #000000;

What is This tool?

It is a free tool that covers every single option under the border-radius property introduced in CSS version 3.

The CSS border-radius is a brilliant addition to CSS since it makes creating effects that were once only possible by adding clunky images to your code native.

border-radius: 10px;
border-radius: 10px 20px 10px 5px;

The two examples above demonstrate the border-radius syntax. The first is the most simple implementation and will give all four corners of an element a 10-pixel radius. The later gives control over each corner of an element, from left to right they are; top, right bottom left.

Additionally, this CSS border-radius generator also includes border style and border colour options, which you may want to apply to enhance the look of your border-radius.

Here are all the available styles:

solid
dotted
dashed
double
groove
ridge
inset
outset
inherit
hidden
none

While most of the newest versions of browsers will support just using the "box-shadow:" initiator, some older versions will require you to add the "-webkit-border-radius:" or "-moz-border-radius:" While this is being phased out it is still worth putting in there for users with outdated software.