How to Make Rounded Divs Using CSS
Before browsers became compatible with the "border-radius" property of Cascading Style Sheets (CSS), designers needed to cut up corners in graphic editing programs, then apply them to Web pages using complicated layout tricks. With "border-radius," you can make rounded DIVs with only a line or two of code and no images. You can even change the shapes of rounded corners and apply a different rounding to each corner of a DIV.
Other People Are Reading
Instructions
-
-
1
Open your HTML file in a code editor such as jEdit, Notepad++ or BBEdit. Type "<div>" tags into your code like this:
<div></div>
Type your content between the "<div>" tags. You can place any content you like, such as images and text.
-
2
Add an ID attribute to your opening "<div>" tag. Use the ID to give your DIV a unique and meaningful name. You cannot use an ID more than once on the same Web page without causing layout problems when you try to target the ID in CSS. Add the ID attribute like this:
<div id="rounded">Your content...</div>
-
-
3
Scroll up in your HTML file and look for "<link>" or "<style>" tags. Open a CSS file referenced by a "<link>" tag and add your CSS code there. If you only find "<style>" tags, then add CSS code between those tags. You can add the tags yourself, too, between the "<head>" tags.
-
4
Type a selector - code to "select" an HTML element - to target your DIV by its ID name. Add the "border-radius" property between your curly braces and set it to a pixel value. The code looks like this:
#rounded {border-radius: 10px;}
Higher radius values make DIVs more rounded, while lower values create a more subtle rounding effect.
-
5
Add a radius length to change the shape of the curve like this:
#rounded {border-radius: 20px 10px;}
The above example gives the border a corner radius of 10 pixels, and sets the width of the corner to twenty pixels.
-
6
Give each corner its own "border-radius" style like this:
#rounded {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
-
1
Tips & Warnings
Set the "border-radius" to a value larger than the padding value of the DIV to make the inner corners rounded when you apply a thick border.
As of May 2011, all browsers support "border-radius" without the use of vendor prefixes. You do not need to add properties such as "-webkit-border-radius" to make rounded corners work.
References
Resources
- Photo Credit BananaStock/BananaStock/Getty Images
