Home/ Questions/Q 116513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T03:11:23+00:00

I’m currently using a combination of CSS and Div tags to achieve rounded corners

  • 0

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. ^_^

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0