Making rounded cornders in CSS

Just wanted to let you know the dotted CSS borders trick and the subject of rounded corners in CSS came up so thats been showed in this method. There are other ways that its done, but the other methods always require lots of complex HTML and CSS. Just figure that lots of nested divs aren’t much better than using a table, so this way doesn’t require much in the way of HTML or CSS. Here’s how it cane be done.

Create four images for your corners. Most graphics programs have a tool that will create rounded-off squares. square will be used here…



…and the corners are cut off of for the four images

In the spot where the box to show up is wanted, just create a container div to hold the box, a div for the top row and a div for the bottom row. Between the top and bottom rows, the content should be added. In the top and bottom row divs, add the left corner image and set the inline style to read display: none;. This makes the image invisible unless , make it visible through the stylesheet. That way, it can hide the effect from incompatible browsers by not showing them the stylesheet.

<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>

<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>

The CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn’t sit right up against the edge of the box.

Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}