corner image

Rounded corners with CSS

The rounded corners on this page are created with CSS and 4 image files. In case you hadn't noticed, if you resize the browser window, the rounded box follows the size of the window.

Here's how I created rounded corners.
Step 1 is to figure out what your background and box colors will be. On this page, the color of the box is black and the background is gray.
Step 2 is to create the corners for the box. The corners for this box are:
Step 3 is to add the needed HTML code.
The trick is, define 2 of the images in the CSS file, and 2 in HTML.
For the HTML: Lines beginning with # are comments
<div class=main>
<div class=rtop>
# I use 'rtop' for the rounded top.. It will actually be the upper right
<img src=urb.gif class=corner alt='corner image' >
</div> # end of upper right image div
<div class=content>
Main content goes here. I used another <div> with another class to get a different background
</div> #end of 'content' div
# now to finish the bottom of the rounded box
<div class="rbot"> # class for bottom of box
<img src=llb.gif class=corner alt='corner image' >
</div> # end of lower left image div
</div> #end of 'main' div

Now for the 'css' part.
I have a seperate CSS file and reference it via the header. You could probably do this inline. I just don't do CSS inline. (don't ask why, I don't know)
CSS:

.main {
color:white;
margin-top:2em;
margin-left:3em;
margin-right:4em;
background-color:#000;
}

.content {
color:black;
padding:1em 2em;
margin-top:3em;
margin-left:3em;
margin-right:3em;
margin-bottom:3em;
background-color:#ffc;
}

.rtop {
background:url(/urb.gif) no-repeat top right;
}

.rbot {
background:url(/lrb.gif) no-repeat top right;
}

img.corner {
width:20px;
height:20px;
border:none;
display:block;
}

Well, there you have it. rounded corners.

corner image

Web Pcfubar.net
Donate towards my web hosting bill!
email me: roger AT pcfubar.net with any questions