Rounded Corners in CSS

April 2nd, 2004

I’ve been tinkering today and have my very first tutorial for CSS ready to publish. This is a modification of “The Thrash Box” as described at Vertexwerks combined with the Glish ALA Style (which is based on the sliding doors model found at ALA)along with my own little modifications.
Here is the basic shape of the layout:
rounde corners layout
The general benefits of this layout model are that you can use a graphic (read pattern or color) background for you box, but you don’t have to make the files huge to slide behind the text.
It consists of 4 corners, and one pattern for the background.
Check out the CSS here:
/* Based on the ThrashBox at http://www.vertexwerks.com/tests/sidebox/ */
/* And, ALA style from Glish http://glish.com/css/9.asp */

body {
background-color: black;
}

#header {
color: white;
}

#main {
background-color: #F4EDC9;
}
/* Show only to IE PC \*/
* html .boxHead h2 {height: 1%;} /* For IE 5 PC */
* html .boxFoot h5 {height: 1%;} /* For IE 5 PC */

/* Main Content Box */
#mainContent {
float: left;
margin: 10px;
width: 67%; /* % so it will grow */
background: url(../images/slideBack.jpg);
font-size: 100%;
}

.boxHead {
background: url(../images/patternSlide_02.jpg) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}

.boxHead h2 {
background: url(../images/patternSlide_01.jpg) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
}

.boxBody {
background: url(../images/slideBack.jpg);
margin: 0;
padding: 5px 10px 10px;
}

.boxFoot {
background: url(../images/patternSlide_03.jpg) no-repeat bottom right;
margin: 0;
padding: 0;
text-align: center;
}

.boxFoot h5 {
background: url(../images/patternSlide_04.jpg) no-repeat bottom left;
margin: 0;
padding: 22px 30px 5px;
}

/* Links Box */
.links {
padding-top: 10px;
}

.links a {
color: red;
text-decoration: none;
}
.links a:hover {
color: white;
background-color: red;
}
If you just want to see it in action here are the links:
html file
CSS file

The major difference between this and the Thrash box is that I included a footer that holds the two bottom corners, this frees me up to put a background on the area that contains my text as well as on the entire box. In the Thrash box model you have to use the background for the main box part to put in the lower-right corner which means you have to make the file big enough to stretch if the box is dynamic. Mine also gives you a footer at the bottom or padding if left blank.
Let me know what you think of this option, I checked it in Safari, Camino, FireFox, Mozilla, IE 5 Mac, and IE 6 Win, but don’t have IE 5 Win. So far so good.

Posted in General |