How do I create a border with rounded corners?

Get Started
1

Hi everyone

I am a total newbie - experimenting with my first ever website. It’s all very exciting but I have quickly encounted my first question and wondered if anyone can help.

Does anyone know how to create a border with rounded corners around my content?

I have found out how to do all manner of borders (dashed, double, dotted) but cannot find out how to do the one I really want!

Perhaps it’s more complicated then those mentioned above!

Can anyone help?

Thanks
Eleanor

2

This is the best way to go at the moment. CSS3 is still in the works, and only like 2 browsers currently support it. Using those methods will be fantastic… once there is browser support for it.

3

There are much easier ways that don’t rely on Javascript.

I just make two images in photoshop, top corners and bottom corners. Set the top corners as the background image for the div and create a seperate div for the bottom corners. Give the div a side border using CSS and bingo, a box with rounded corners that will expand downwards.

You can’t give the main div padding but you’ll soon figure out how to cope with that.

4

Thanks very much

5

Thanks very much to you both. I shall give it a go!

6

.someclass{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

Then google on DD_roundies.js and use that to get rounded corners in IE, by putting this in the head

<!–[if lte IE 8]>
<script src=“scripts/DD_roundies.js” LANGUAGE=“JAVASCRIPT” TYPE=“TEXT/JAVASCRIPT”></script>
<script>

DD_roundies.addRule(‘.someclass’, ‘10px’);
DD_roundies.addRule(‘.caption’, ‘20px’);

</script>
<![endif]–>

above example shows applying the corners to a second class, called .caption.

DD_roundies has problems however when you are also adding shadows via css3 and IE filters.

If you have a coloured border, you’d add the normal border styles as well to the css.

7

Try CSS3 … http://css3generator.com/

8

To add another 9 to 13k of script to make corners in IE would seem like overkill. Let them have squared corners. haha

I would think the CSS3 reference is good enough. Hopefully IE9 will have support for this.