Rounded corners

Get Started
1

Hi

I hope I have posted this question in the right place. I have had a search round the forums but can’t find anything that is really up to-date.

What’s the best way to do rounded corners these days?

I know there is the Spanky corners here, but was wondering if that is a bit out of date now.

I know it can be done in javascript but not sure where to start there!

Can someone lend a hand with where to start. I just want to have some nice boxes that have clean rounded corners on them.

Many thanks
Scotty

2

Try this in your CSS file and make sure it works in all the browsers



 p,
 div,
 a:hover,
 fieldset,
 img {-webkit-border-radius: 06px; -moz-border-radius: 06px; border-radius: 06px;-  webkit-box-shadow: 1px 1px 3px #ff9900;}

.

3

Ok I added it and it makes corners :slight_smile:

Can you just explain a little of what is happening please.

Thanks a lot

scotty

4

The script is CSS3 which handles round corners instead of using images or other kludges.

I believer it works with all the latest browsers.

Try Googling for CSS3 round corner examples

.

5

It does not work with all the latest browsers (sorry, John). Your example works with the Webkit browsers, i.e. Safari and Chrome, and with Firefox and other Gecko browsers. It does not work on Opera (which makes the 3% of us who use Opera as our main browser pretty steamed :slight_smile: ), nor does it work with IE8 and below (stranding well over half of the browsing public). Right now, your example is about as good as it gets with CSS3, but if you intend for the general public to enjoy your rounded corners, you’ll still have to use a more widely accepted, i.e. kludgy, method.

6

BlackMax, border-radius does work with Opera 10.5. :slight_smile:

7

For IE, check out DD_roundies if you’re going to use the CSS3 approach.

8

Argh, Kohoutek, I hadn’t put my spiffy new 10.53 version of Opera through its paces yet. I am definitely behind the times. Thanks for correcting my obsolete info! Think I’ll go take my Edsel out for a spin… :wink: