How to Create Rounded Borders Using CSS

So you want a website with nice round borders, but you don't want to mess with building images and uploading to your FTP server, then rebuilding these images to fit different-sized tables and graphics? Well, then do I have a solution for you. Web design has evolved far enough through CSS (cascading style sheets) that we can now put round borders on our websites without uploading any images. You can instead use a series of CSS attributes and HTML tags on your web page. If you don't already know about CSS, you will have to read up on it and create a CSS style sheet, a simple text document with the .css extension that you put on your server and link to from the HTML web page, so the browser knows to use it.

Difficulty: Moderate

Instructions

Things You'll Need:

• HTML editor
• CSS style sheet

1. Establish where the rounded borders will go in your web page.

2. Create the following tags in your HTML page around this area. They must be placed in order. <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">Your text info, or graphic here... </div></div></div></div></div></div></div></div> This builds the corners.

3. Open your CSS style sheet and put these tags into it: .bl {background: url(bl.gif) 0 100% no-repeat} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} . The result is four corners with round arcs around your text or image.

4. Blot out the typical border that goes around the rounded corner images by creating a small, white dot, called dot.gif, that is the same size as the border.

5. Add new CSS rules to your style sheet that call up this border blocker (the dot.gif image) so it goes around the edges of the border, blotting out the square lines around the arced corners. The rules are: .b {background: url(dot.gif) 0 100% repeat-x} .l {background: url(dot.gif) 0 0 repeat-y} .r {background: url(dot.gif) 100% 0 repeat-y}

6. Test the borders and make corrections to your code if needed.

Tips & Warnings

• New CSS code is becoming available to make rounded corners that are very stylish. Keep an eye out for these codes. You can find them by following the link in Resources.

Resources

• Twenty-five ways to create round borders
• More info on round borders
• Round borders new code