CSS3 Border Radius Generator

Browser name, version (with -webkit- or -moz- prefix) and version that fully supports the border-radius property.

Property	Chrome	IE/Edge	Firefox	Safari	Opera
border-radius	4.0 -webkit- 5.0	9.0	3.0 -moz- 4.0	3.1 -webkit- 5.0	10.5

The property border-radius allows you to define rounded corners for the border of an HTML element. The curvature of each corner is defined with one or two radii of curvature which make it possible to define an arc of a circle or an arc of an ellipse.

CSS code to obtain rounded edges, both through the official property and through the proprietary ones of Webkit and Mozilla.

this template within a style tag of any block-style element:

{{border-radius | radius1 [radius2 radius3 radius4]}}

• If one value is set, this radius applies to all 4 corners.
• If four values ​​are set, they apply to the top-left, top-right, bottom-right, bottom-left corner in that order.

This property is a shortened property which allows you to define:

• border-top-left-radius,
• border-top-right-radius,
• border-bottom-right-radius,
• border-bottom-left-radius.

CSS Example of border-radius

• border-radius: 30px;
• border-radius: 25% 10%;
• border-radius: 10% 30% 50% 70%;
• border-radius: 10% / 50%;
• border-radius: 10px 100px / 120px;
• border-radius: 50% 20% / 10% 40%;

The property border-radiuscan be defined with:

• one, two, three or even four values ​​of length ( <length>) or percentages ( <percentage>). These values ​​are used to designate a radius of curvature for each angle.
• then optionally a slash (/) followed by one, two, three or four length or percentage values ​​which allow to define an additional radius of curvature to create elliptical corners.

A single value: A length (type <length>) or percentage (type <percentage>) value that indicates the radius to use for each corner when using a single value in the declaration.

Two values ​​(top left corner and bottom right): A length value (type <length>) or a percentage (type <percentage>) that indicates the radius of curvature to use for the top left corner and the bottom right corner of the border box when using two values ​​in the declaration.

Top right and bottom left corner (two- and three-value syntax): A length (type <length>) or percentage (type <percentage>) value that indicates the radius of curvature to use for the top right corner and the bottom left corner of the border box when using two or three values ​​in the declaration.

Top left corner: A length value (type <length>) or a percentage (type <percentage>) that indicates the radius of curvature to use for the top left corner of the element. This value is used when using syntax with three or four values.

Top right corner: A length value (type <length>) or a percentage (type <percentage>) that indicates the radius of curvature to use for the top right corner of the element. This value is used when using syntax with four values.

Bottom right corner: A length value (type <length>) or a percentage (type <percentage>) that indicates the radius of curvature to use for the bottom right corner of the element. This value is used when using syntax with three or four values.

Bottom left corner: A length value (type <length>) or a percentage (type <percentage>) that indicates the radius of curvature to use for the bottom left corner of the element. This value is used when using syntax with four values.

<length>

This value indicates the measurement of the radius of curvature of the circle or the measurement of the half major axis or the half minor axis of the ellipse translating the curvature. This value can be expressed with the different units of >length>. Negative values ​​are considered invalid.

<percentage>

This value translates the measurement of the radius of curvature (elliptical or circular) expressed in percentages relative to the size of the box. The vertical radii are therefore proportional to the height of the box and the horizontal rays proportional to the width of the box. Negative values ​​are considered invalid.