Help with rounded borders using backround images

[s0c0]

I am primarily a PHP and Javascript developer but as part of my consultant work I am often asked to do some HTML and CSS work.  My skills are decent enough in these areas but I have struggled with getting rounded borders to work.

 

Here are the two pages:

http://www.wtalent.com/preview/site.php?app=home&event=join_w

http://www.wtalent.com/preview/site.php?app=home&event=contact

 

You can view source to see how I've attempted doing. Here is the CSS code from the style sheet:

 

/* ROUND CORNERS */
.tl{
background: transparent url('/preview/img/tl-round.gif') no-repeat;
position:absolute;
top:0px;
left:0px;
width:10px;
}
.tr{
background:transparent url('/preview/img/tr-round.gif') no-repeat;
position:absolute;
top:0px;
right:0px;
width:10px;
}
.bl{
background: transparent url('/preview/img/bl-round.gif') no-repeat;
position:absolute;
top:97.5%;
left:0px;
width:10px;
}
.br{
background: transparent url('/preview/img/br-round.gif') no-repeat;
position:absolute;
top:97.5%;
right:0px;
width:10px;
}

 

I put these inside this CSS class:

 

.whiteBlock {
top:0px;
position:relative;
background-color: #FFF;
color:#222222;
font-size:12px;
padding:0px 0px 0px 0px;
}

 

And then use a bit of inline CSS to further manipulate this.  Any ideas?  If I can't get it one-hundred precent in the big 3 browsers (IE, FireFox,Safari) then I will have to do what I've done in the past using 2 images one on top spanning the entire width of the CSS div where the content goes and the other on the bottom.

 

Thanks for reading.

[phpQuestioner]

here is a good tutorial, that may help you out with this:

 

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

[bronzemonkey]

By the way, your boxes don't resize to fit the content if the text-size is increased...are you using a fixed height for your rounded boxes?

 

Since you're using a fixed width box, there is no point using images for each individual corner, you may as well just use an image on the top and one of the bottom...it will also reduce the amount of unsemantic markup because you can use a background image on the whiteblock itself.

 

You can also get away with using only one image.

 

Imagine this is your top image (the two top corners):

 

_______

/          \

 

And this your bottom image:

 

\_______/

 

 

Combine them both into a single image arranged like this:

 

\_______/

_______

/          \

 

And then use background image positioning. You'll notice that the bottom corners are hidden when the image is used for the top corners, and that the top corners are hidden when the image is used for the bottom corners. The same idea can be used for liquid-box rounded corners or complex image borders.

 

[GameYin]

Try this to get rounded borders. Try this code. Replace the image URL in the parenthesis.

#top {
   margin: 0 auto;	
width: 800px;
height: 150px;	
text-align: left;
background: url() no-repeat top;
        border: 5px solid #780800;
}
#rightTop {
width: 690px;
height: 22px;
background: url() no-repeat top;
}

#rightCont {
padding: 0 15px;
background: #D0D4B0 url() repeat-y;
text-align: justify;
}

#rightBottom {
width: 690px;
height: 22px;
background: url() no-repeat bottom;
}

[SuperBlue]

If you want a practical solution, which have the advantage of using scaleable units (EM) instead the fixed units, also since locking the font-size is bad, more webdesigners are beginning to take advantage of EM.

 

You should look at my BorderTechnique at http://www.brugbart.dk/bordertechnique.html

 

Images is Superior to most other solutions, since they offer such a huge possibility in customization, however browser limits force us to use extra divs, as such this dosent do any harm, so im happy to say div-it-is.

 

This will allow any content, to decide the final height of your basement div. Supported browsers: IE7, FireFox, Safari, Opera.