CSS Rounded Corners Tutorial
Cascading Style Sheets (CSS) level three -- more commonly known as CSS3 -- gives Web designers the ability to create many visual effects that once required complicated image slicing. Instead of cutting up images in a graphics editor and applying them to your Web pages, you can now use a few lines of CSS code. Rounded corners, for example, only require the "border-radius" property. Clever use of this property can create a variety of shapes, including circles. Use the "border-radius" property in CSS to create rounded corners on almost any HTML element.
Other People Are Reading
Instructions
-
Prepare Your HTML Code
-
1
Create a new HTML file in a code editor or Notepad. Copy and paste this code into the file:
<html>
<head>
<title>Corners Tutorial</title>
</head>
<body>
</body>
</html>
-
2
Add a pair of div tags between the body tags of your HTML file. Give the div an ID name. The code for your div should look like this:
<div id="rounded"></div>
-
-
3
Add a pair of style tags after the title tags in your HTML file's head. Here is an example of style tags:
<style type="text/css"></style>
Apply Rounded Corners Using CSS
-
4
Create a blank line between your style tags and add the following code:
#rounded {}
Replace "rounded" with the name you gave the div.
-
5
Set the "border-radius" property to a pixel value of your choice. The value of your border's radius determines the amount of rounding that browsers apply to your div. Here is an example:
#rounded {
border-radius: 10px;
}
-
6
Give each corner a different curve size by setting the "border-radius" property for each one. Here is how the code looks:
#rounded {
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 25px;
}
-
7
Stretch out the rounded corners by adding "length" values to your "border-radius" properties. Here is the code:
border-top-left-radius: 100px 50px;
The "length" value is 100 pixels and the radius is set to 50 pixels. This creates a curve that is longer than tall. Reverse the values to create a curve that is longer than wide.
-
1
Tips & Warnings
You can also set "border-radius" properties to percentage values. Apply "border-radius: 50%;" to turn your div into a circle.
Apply "border-radius" properties to any HTML element you want. Instead of creating a div, consider rounding the corners of headings or even images.
These CSS3 codes will not work on older browsers, including Internet Explorer 8 and below. Consider using an image-based or JavaScript fallback for those browsers or allow users of those browsers to see sharp corners instead.
References
- Photo Credit Jupiterimages/Photos.com/Getty Images
