[Diffraction]

Hey guys,

Welcome to the first of a series of "quick tips" I'll be doing.

The first one starts with a fun technique for rounded corners (without images) on your webpage.

In your HTML you will need a div such as:

<div class="rounded"><p>Example div</p></div>

And then in your CSS we will style that box by giving it a width, height, background-color and then applying the browser specific border-radius properties.

#rounded {  width:150px;  height:150px;  background-color:grey;  border-radius:8px;  -moz-border-radius:8px;  -webkit-border-radius:8px;}

The first border-radius property will give us rounded corners in the Opera browser.

The second -moz-border-radius property is for Gecko based browsers (like Mozilla Firefox).

The third and final property -webkit-border-radius is for WebKit based browsers like Google Chrome and Apple's Safari.

For more information about CSS3, I recommend CSS3.info.

Enjoy!

[Advertisements]

Lot of that is old hat and is available on the Internet. Besides, I thould only posts requesting help were allowed. Did the Terms of Use change?

[AstraNut]

Lot of that is old hat and is available on the Internet. Besides, I thould only posts requesting help were allowed. Did the Terms of Use change?

[Diffraction]

I'm sorry, I'm new to the forum and thought I would contribute in the area I specialize in.

Edited by Diffraction, 13 July 2010 - 09:31 PM.

[AstraNut]

Double-check the forums and see if they have a section that allows those "quick tips". Would be neat if there is a section for them. Think they had something for tutorials that were submitted for approval. Don't know if that is still available.

Nice tip, BTW.

Edited by AstraNut, 13 July 2010 - 09:53 PM.

[the observationist]

wow, i never actually knew about that. I've been making ueber-heavy code that does it pretty much the same way they did it with tables way back. thanks!


BTW, you mention WebKit, mozilla and opera...does IE support this property and is it W3C complient?

Edited by the observationist, 01 October 2010 - 10:58 AM.