Fancy Border Radius Generator

A visual generator to build organic looking shapes with the help of CSS3 border-radius property
Need more control? Here is the 8 Points full control border radius generator.
30% 70% 70% 30% / 30% 30% 70% 70%

CSS3 Border Radius Overview

The property border-radius can be used to frame to be provided with rounded corners. The radius is also applied to backgrounds and shadow effects, even if the element has no frame.

border-radius is short for for properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.


It is necessary to distinguish between various cases of desired angles, according to the four angles, and whether the radius of the angles are equal or different.

All radius are the same.

{{border radius | value with unit of measure}}

All radii are different.

{{border radius | radius1 radius2 radius3 radius4}}


It has only one binding parameter, but it can contain one, two, three, or four corner indications (according to CSS manuals).

  • At one corner all the corners receive the same roundness.
  • At two the first defines corners above left and bottom right, while the second defines top right and bottom left.
  • At three the first defines corners top left, the second top right and bottom left and the third bottom right.
  • At four the order is as follows: top left, top right, bottom right and bottom left.

Do not use two or three values, as this will result in a different display of the different browsers.


    border-radius: <length-percentage> { 1,4 }  [ / <length-percentage> { 1,4 }  ] ?
    in which 
    <length-percentage> = <length> | <percentage>


    border-radius: [<length> | <Percentage>] {1.4}
                   [/ [<Length> | <Percentage>] {1.4}]?