CSS: How to add rounded corner with border and no images?

Question

Hi Guys,

Do you guys know something like this that can work with IE? No images and with borders?

http://www.css3.info/preview/rounded-border/

Thanks a lot.

Cheers, Mark

Answer 1

With CSS3 you can achieve this without using any images.

But isn't supported in many browsers.

Answer 2

I haven't tried but you can have a look on this

Nifty Corners Cube: rounded corners without images - 
URL is http://www.html.it/articoli/niftycube/index.html

OR you can try

JQuery Corners - 
http://www.atblabs.com/jquery.corners.html

Example usage -

<div style="background-color:#acc; padding:10px" class="rounded">
  Example with different x and y sizes.
</div>
<script>$(document).ready( function(){
  $('.rounded').corners("30px 10px");
});</script>

Works with:

    * iPhone
    * Chrome
    * Firefox
    * Safari 2+
    * Opera 9.0+
    * Internet Explorer 6+
    * and probably more...

Answer 3

Try Nifty Corners Cube, but it doesn't allow you to have a border color different form the inner background color. You will need to find a workaround (nifty corner inside a nifty corner). You can also checkout jQueryUI's themeroller. It uses images but you can use it to design your own theme and all you have to do is download the whole package containing the scripts, styles and images. Check out the part where you can create Highlight / Error.

Here's a sample of the nifty corners cube inside another nifty corner. Just view the source. Nifty Corners Cube sample