IMC Home Page | Library Home Page | UAlbany Home Page
Introduction to
Basic HTML 5 & CSS3 Effects

Curves

Curves are among the most exciting features of CSS3. Cascading Style Sheets did not have the ability to create curve attributes, and Older browsers cannot display CSS3 curved elements. Now curves can be added to several different page components. In fact, this page makes extensive use of the curve feature. If you do not see curved corners on this page, you have an older browser and you may want to upgrade to swtich to a new version.

Curves are established by applying a radius to the border corners of a page element. Such a radius attribute can be applied to divisions <div>, paragraphs <p>, and several other HTML tags. In the following examples we will work with divisions.

Radius Syntax

This division has a border radius of 14 pixels

The curves are created by applying a radius to the corners of an element's borders. The division on the right is 100 pixel wide by 100 pixels high. It has a border radius of 14 pixels. The syntax for the radius attribute is:

border-radius: 14px;

The entire CSS style for this division is:

.RadiusFourteen {
color: #FFF;
background-color: #603;
border-radius: 14px;
float: right;
height: 200px;
width: 200px;
font-size: 12px;
text-align: center;
padding-top: 20px;
padding-right: 6px;
padding-left: 6px;
margin-bottom: 30px;
margin-left: 20px;
}

 

Modifying the border-radius attribute will change the way the div is displayed. For instance:

border-radius: 60px;

creates a div that is round as shown on the right. It appears to be round because each side dimension matches the corner radius, 60 pixels.

 

 

Asymmetrical shapes can be made by specifying the radii for each corner. The shape on the right uses the same clock-wise method that is used for other CSS attributes. The phrasing is:

border-radius: 60px 60px 10px 10px;

Starting at the top left corner the radius is 60 pixels, top right is 60 pixels, bottom right is 10 pixels, and, finally, the bottom left is 10 pixels.

 

<-- Return to top of page -->