Fancy Border Radius Generator

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>


    respectively. 

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