CSS Border Radius Generator
This generator will help you create the code necassary to use rounded corners (border-radius) on your webpages. This example uses the CSS3 (border-radius) property. You can select from having all the corners the same radius or you can customize each corner individually.
Update This generator has been updated with a few more features enabled.
Basic Radius Options
Advanced Radius Options
Border Radius Property
The CSS property border-radius allows you to make a rounded border or round the corners of an element. The value of the property determines the radius of the circle. When using the property, instead of drawing the usual right corners of the element, a rounded frame with rounded corners will be used according to an arc of a circle with a given radius:
The CSS property border-radius can contain from one to four values, separated by spaces. The number of values determines how the corner rounding radii are set. If more than one value is specified, corner rounding is set starting at the top left corner:
In addition to the border-radius property, you can also set the radius of each corner of the block separately using the following CSS propeties:
- border-top-left-radius - Rounds the top-left corner of an element.
- border-top-right-radius - Rounds the top-right corner of an element.
- border-bottom-left-radius - Rounds the bottom left corner of an element.
- border-bottom-right-radius - Rounds the bottom right corner of an element.
The border-radius property also allows you to round off corners as an oval arc rather than a circle:
To define an oval, a combination of two values is used, separated by an / symbol:
border-radius: 20px / 35px;
The value to the left of the slash defines the horizontal radius and the value to the right defines the vertical radius.
Each of the two parts (before and after the slash) follows the same rules as when creating round radius. This means that each part can contain from one to four values, separated by spaces. And the number of specified values will determine how the corner radii are set. For example, the four values before the symbol / represent the horizontal radii for the top-left, top-right, bottom-right, and bottom-left corners. The values after the symbol / respectively represent the vertical radii for the same corners.