How to make round corners with CSS on your web page

Create a web page with fresh round corners using CSS!

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Basic knowledge of HTML
• computer
• text editor (notepad is perfect)

1. Open 2 notepad files.
   Open the HTML file you wish to have your round box in.
   The other will be your CSS file. Save it as style.css
   (if you already have a CSS file linked, open that, and skip step 5)

2. Insert this code into your HTML file. NOTE - You will need to replace the ( ) with < > on the HTML tags.
   (Ehow doesnt allow html tags in their tutorials)
   
   *copy below this*
   
   (div class="bl")
   (div class="br")
   (div class="tl")
   (div class="tr")
   
   (p) I am a round orange box! (/p)
   
   (/div)
   (/div)
   (/div)
   (/div)

3. Paste the code into your HTML file and replace the () with <>
   
   You can just think of the grouped DIVs as one tag almost, just put the content you want to have inside the box in between the beginning tags and the ending tags.

4. Remember the file you saved as style.css? Open that up and paste this code into it.
   
   *copy under this*
   
   .bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
   .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}
   
   *Stop copying*
   
   Now save the file.
   
   Note- you can change the color of the box by changing the Hexadecimal value in the first line of the code. Be aware that you will need to use a program such as photoshop or paint.net to change the color of the corners.

5. Now to link your CSS file to your HTML with the following:
   Put this between the head tags in your HTML file!
   
   (link rel="stylesheet" type="text/css" href="style.css"/)
   
   And again, make sure to replace the parenthesis with these things < >
   Remember to save your HTML file.

6. 
    

   Now save these images to your computer. Make sure you save them in the same folder that your HTML and CSS files are saved in. Also make sure they are saved with the same file name they have in the CSS, so that they are linked corectly, (example: tr.gif, not tr_thumb.gif) They will be superimposed on the corners and you will have a round cornered box!

7. 
    

   top left corner

8. 
    

   bottom right corner

9. 
    

   bottom left corner

Tips & Warnings

• Want to better learn how this works? Mess with it! You can always come back and redo it!