How to Add Curved Edges in CSS
The CSS3 rounded borders feature provides you with the ability to easily create rthe curved border effect, and enjoys support by Internet Explorer 9, Firefox 4, Safari 5 and other major Web browsers. Curved borders help create a sense of balance in a website's design. Their smooth corners cut the monotony of straight lines and give a page a softer look.
Other People Are Reading
Instructions
-
-
1
Find the CSS selector to add the curved edges to. Insert the "border-radius" property and enter its value in either percentage or unit, such as pixels or ems. The higher the number, the more rounded the curve. For example, to make the edges of a <div> tag 50 pixels in size, write:
div
{
border-style: solid; /* Comment: This is necessary to make he borders visible. */
border-radius:50px;
} -
2
Enter the border properties individually if you want to assign a different curve amount to each corner. Follow the order top-left, top-right, bottom-right, bottom-left, as shown below:
div { border-style: solid;
border-top-left-radius:1em;
border-top-right-radius:2em;
border-bottom-right-radius:3em;
border-bottom-left-radius:4em;
} -
-
3
Write the border radius properties in a single declaration, as follows. Use this shorthand method if you do not want to to declare each corner's property individually. This example causes the top left and bottom left corners to be angular while the top right and bottom right corners are curved.
div {border-radius: 0em 3em 3em 0em;
}
-
1
Tips & Warnings
Each corner can have up to two values. For example, the property "border-top-right-radius" can have a value of "2em 1em." The first value is the horizontal radius, the second value is the vertical radius. If you enter only one value, that same value will be used for both radii.
Prefix "-moz-" (without quotes) before the "border-radius" property for Firefox 3.6 and earlier.
Curved borders do not work with Internet Explorer versions older than IE9.
