CSS: Adding Divs to a Div (rounded corner discussion)

Question

I'm currently using a combination of CSS and Div tags to achieve rounded corners on a text element. This is the CSS I'm using:

div#installerSearch {
    float: left;
    position: relative;
    color: #000055;
    width: 154px;
    border: 1px solid #2A5390;
    padding: 8px;
    background-image: url('images/background.png');
}

div.roundAllGreen {
    position: absolute;
    width: 8px;
    height: 8px;
    background-image: url('images/roundgreenthingy.png');
}

div.roundTopLeft {
    left: -1px;
    top: -1px;
    background-position: 0px 0px;    
}

div.roundTopRight {
    right: -1px;
    top: -1px;
    background-position: -7px 0px;    
}

div.roundBottomLeft {
    left: -1px;
    bottom: -1px;
    background-position: 0px -7px;    
}

div.roundBottomRight {
    right: -1px;
    bottom: -1px;
    background-position: -7px -7px;    
}

and this is the resulting HTML:

<div id="installerSearch">
<div class="roundAll roundTopLeft"></div>
<div class="roundAll roundTopRight"></div>
<div class="roundAll roundBottomLeft"></div>
<div class="roundAll roundBottomRight"></div>
<p> ... </p>
</div>

Can anyone else spot the issue? I've resorted (for lack of a better method) to including presentation in the form of markup, which makes this a little difficult to re-theme, as I'm trying to do.

What I'd really like would be the ability to have CSS add div tags inside a container div for me. I realize that this breaks the "no content in CSS" rule on a code level, but considering that my rounded corners hardly qualify as content it doesn't break it in my book.

So I guess what I'm asking is, is there a good way to accomplish the same effect (rounded corners using images) without needing to introduce extra tags into my content using CSS? The idea here is to end up with a CSS sheet that I can swap out completely without needing to make modifications to my template HTML page, but if that's not possible I'd accept that as an answer. It just seems that google is utterly failing on me this time. ^_^

Answer 1

You can write JavaScript that will add those divs for you. But it's a huge problem in CSS, it does depend on the content anyway whatever others might say.

Answer 2

Short answer: there is not currently a well-supported CSS-only way to do this.

If you can't wait around for CSS3 support, you may want to look in to JavaScript alternatives. Nifty Corners Cube will add rounded corners, and claims to even anti-alias. There are also many jQuery corner plugins, and this one does many different corner effects.

Is there a particular reason you want to use images for the corners? If all you need is a round corner, you may be able to get by using the aforementioned JavaScript solutions. I would really recommend looking at the Nifty Corners Cube examples.

Edit: If you are concerned about extra markup harming your search engine efficiency, then a JavaScript solution would make even more sense (although a CSS-only solution would be best in my opinion) because the extra markup would be added client-side. I have worked with a few search engines and they purposely strip out script tags before indexing the content.

Answer 3

Another jquery plugin that works very nice: Anti-aliased Rounded corners with JQuery

Answer 4

Can anyone else spot the issue?

The difference in className between roundAll and roundAllGreen?

I've resorted (for lack of a better method) to including presentation in the form of markup, which makes this a little difficult to re-theme, as I'm trying to do.

Some sort of interference with the markup is unavoidable until such time as (a) IE supports border-radius, or (b) multiple background images on a single element become possible.

Another possibility with somewhat less interference is background nesting:

<div class="box"><div><div><div>
    Hello
</div></div></div></div>

.box { background: url(topleft.png) top left no-repeat; }
.box div { background: url(topright.png) top right no-repeat; }
.box div div { background: url(bottomleft.png) bottom left no-repeat; }
.box div div div { background: url(bottomright.png) bottom right no-repeat; }

In your current page the width of the box is fixed, so you can get away with only two nested divs, one for the top edge and one for the bottom.

Answer 5

one mod to bobinces's solution:

<div class="box"><div><div><div>
    Hello
</div></div></div></div>

.box { background: url(topleft.png) top left no-repeat; }
.box>div { background: url(topright.png) top right no-repeat; }
.box>div>div { background: url(bottomleft.png) bottom left no-repeat; }
.box>div>div>div { background: url(bottomright.png) bottom right no-repeat; }

Answer 6

I assume you're against using images for this? If you're not opposed to images, try http://www.easyimg.com. Pretty cool solution, no photoshop work to do at all. Design your images directly in the img src tag.

Answer 7

I've implemented a generator, which do it automaticly. Not only rounded corner boxes are avaible there. Try it on http://www.wild-web.eu/css-box-generator/