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.

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.

Border-radius browser support

Chrome
Safari
Firefox
Opera
IE
Android
iOS
5+
3.1+
2+
11.5+
9+
2.1+
3.2+