CSS rounded corners

HTML & CSS
1

Hi Folks,

can anyone please tell me how to do this with one image?

I’d like it to work in IE 6 too.

My html is:

<div id="widget1" class="widget"> <strong>title</strong>
  <ul>
 
      <li>link</li>
 
  </ul>
</div>
2

Paul O’Brien also has some handy pages on this:

http://www.pmob.co.uk/temp/roundcorner-oneimage.htm

3

Have a look at Spiffy Corners that uses CSS. You may be able to implement this into what you’re trying to achieve.

All the best

4

Thanks for all the replies folks, really appreciate it

5

Well… if you know the content will always be of a certain width and can guarantee that it will never be any taller than you containing div a single image solution would probably work. Or if you were willing to include an IE (6,7,8, and now 9 too; good grief :headbang:) specific stylesheets you could use CSS 3 for browsers that will support it, and only give the bummer to IE users. Because not all sites HAVE to look exactly the same in every browser.

Otherwise a sliding doors approach, or other multi image fix would be your best bet. I have a feeling that the best chance you have of getting it to look and work like you want is going to be sliding doors. You can even have the CSS, HTML and images all generated for you if you did a quick google search for rounded corners CSS, or something along those lines.

Good luck. :slight_smile:

6

IE9 actually supports CSS3 rounded corners, believe it or not. :wink:

7

Sorry for being vaigue.

I would like to create a div with rounded corners, of fixed width, with transparent images, like on the bbc site:

I’ve got the widget design working which uses the html above. I’d like to do this using one image if possible.

Thanks again

8

Such a vague question. You want what exactly done with one image?

9

For something like this I usually use a derivative of this approach. It’s the best one-image CSS rounded corner technique that I’m aware of to date.