Rounded Corners via HTML and CSS

Under Request I had to implement rounded corners on the SSAGO Website.

I’ve found there are 3 basic methods to do this, Tables, Divs and using Mozilla CSS.

Mozilla CSS

One line of extra css for rounded corners (in Mozilla)

The easiest by far is using the Mozilla CSS attribute as shown on the left. However easiest isn’t always best as this method only works in Mozilla but the effects are quite nice if you only want to treat those in Firefox. Oneday perhaps when CSS 3.0 and the border-radius property become standard all browsers will do this as standard.


div {
-moz-border-radius: 10px;
}

Tables

A Table that creates Round Corners

Ah Tables, the old favorite, create a 3 by 3 cell table with an img of a round corner in the NW, NE, SW and SE corners with horizontal and vertial lines to connect them in the N, E, S, W cells. The images in the North/South cells can be 1px wide and the East/West cells 1px tall, reason being that you can stretch them without losing any quality making the tables stretch around content of any size.

<table>
<tr>
<td><img></td>
<td><img></td>
<td><img></td>
</td>
</tr>
<tr>
<td><img></td>
<td> A Table that creates Round Corners </td>
<td><img></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img></td>
</tr>
</table>

The problem with this is that when you select the page the images are selected aswell, this can be overcome by using CSS to make the images the background of the cell but then you have to size the height and width of the cells so all the image is shown. Basically what your looking at is a large amount of table HTML or a large chunk of CSS.

Divs

Many Divs make a box with rounded corners.

And lastly we have CSS and Div boxes, using 9 divs we can create rounded corners without any images! An overall containing div contains 4 layers of divs above and below the content. The the divs closest to the content are largest with them deceasing in width by a pixel or 2 on each progressive layer outwards creating the illusion of a smooth corner. The problem with this if you are using other divs or spans positioned around and/or over the page then there can be rendering problems in IE so you have to be very careful with the visual CSS.

Round Corner Stylesheet

CSS

.n1, .n2, .n3, .n4,
.s1, .s2, .s3, .s4 {
overflow: hidden;
background: #fff;
border-style: solid;
border-width: 0 1px 0 1px;
}

.n1, .n2, .n3,
.s1, .s2, .s3 {
height: 1px;
}

.n4, .s4 {
height: 2px;
margin: 0 1px 0 1px;
}

.n1, .s1 {
margin: 0 5px 0 5px;
background-color: #30A018;
border-color: #30A018;
}

.n2, .s2 {
margin: 0 3px 0 3px;
border-width: 0 2px 0 2px;
}

.n3, .s3 {
margin: 0 2px 0 2px;
}

.n1, .n2, .n3, .n4,
.s4, .s3, .s2, .s1 {
border-color: #30A018;
}

.RoundCornerBox {
display: block;
background: transparent;
margin: 20px auto 20px auto;
overflow: hidden;
clear: both;
}

.RoundCornerContent {
display: block;
overflow: hidden;
clear: both;
white-space: nowrap;
margin: 0;
padding: 12px 5px 5px 5px;
background-color: #fff;
border-style: solid;
border-width: 0 1px 0 1px;
border-color: #30A018;
}

HTML


<div class="RoundCornerBox">
<div class="n1"></div>
<div class="n2"></div>
<div class="n3"></div>
<div class="n4"></div>
<div class="RoundCornerContent">
Many Divs make a box with rounded corners.
</div>
<div class="s4"></div>
<div class="s3"></div>
<div class="s2"></div>
<div class="s1"></div>
</div>

One thought on “Rounded Corners via HTML and CSS”

  1. This is exactly what I needed to know, I was a little suprised about the -moz-border-radius attribute, certainly very versitile but unfortunately if you use it with the background-color attribute the bgc shows outside of the curve.

Leave a Reply

Your email address will not be published. Required fields are marked *