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

问题

Is there something like this that can work with IE? No images and with borders?

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

回答1:

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

回答2:

With CSS3 you can achieve this without using any images.

But isn't supported in many browsers.

回答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

回答4:

Try this one:

http://www.cssplay.co.uk/boxes/curves.html

This method uses no images, no javascript, but a little bit of extra HTML with CSS.

Basicly, this method is based on the use bullets (•). Bullets are given the desired color and placed in the four corners of the box. The box is relatively positioned, the bullets are positioned absolutely. That is they are positioned absolutely relative to the parent box.

来源：https://stackoverflow.com/questions/1152529/css-how-to-add-rounded-corner-with-border-and-no-images

标签

css

rounded-corners