2

I have been googling for rounded corners with a css div.. but found very cluttered stuff.. some are still using for images of rounded corners and placing them on four corners...

can somedoby help with with a simple CSS code for this... or can it be attained with jQuery

Manishearth
  • 14,882
  • 8
  • 59
  • 76
Moon
  • 19,518
  • 56
  • 138
  • 200
  • 5
    `border-radius`, `-moz-border-radius`, `-webkit-border-radius` ? The reason why images are being uses is that those CSS properties are only supported in the latest versions of major browsers and are not supported in IE (other than in IE9 beta). – Andrew Moore Sep 30 '10 at 12:39
  • 1
    possible duplicate of [What is the best way to create rounded corners using CSS?](http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners-using-css) – Nikita Rybak Sep 30 '10 at 12:40
  • @Andrew: one can add rounded corners support for IE with the help of [CSS3PIE](http://css3pie.com/). It has its limitations, of course, but personally, I found it extremely handy. – Valentin Flachsel Sep 30 '10 at 12:54
  • IE9 will support most of CSS3 stuff including border-radius, so as soon you will start using CSS3 the better for everybody. Let this be reason to upgrade. – gertas Sep 30 '10 at 12:56

1 Answers1

5

The CSS way to support border radius is as follows:

CSS:

.myClass
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
     border-radius: 10px;
}

This will tell Mozilla, Webkit and then standards reading browsers (as far as I understand FF4, Chrome 6 and IE9 will read without the browser prefix) to round your corners by whichever pixel radius you see fit :)

Images were used before these CSS options were available, and the articles are still there. There are also jQuery solutions such as the Curvy Corners script which does support IE.

Kyle
  • 65,599
  • 28
  • 144
  • 152