CODEWITHSUNDEEP
cssrounded-corners
marknt15
marknt15

Reputation: 5127

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/

Upvotes: 0

Views: 3398

Answers (4)

Jamol
Jamol

Reputation: 2291

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.

Upvotes: 0

TigerTiger
TigerTiger

Reputation: 10806

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

Upvotes: 5

Randell
Randell

Reputation: 6170

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

Upvotes: 0

rahul
rahul

Reputation: 187110

With CSS3 you can achieve this without using any images.

But isn't supported in many browsers.

Upvotes: 1

Related Questions