Round Corners using CSS

I have known for a long time that Mozilla/FireFox has a custom CSS attribute to apply the round corners on the HTML element using the “-moz-border-radius” property. But as apparent from the name prefix, it works only on Mozill/FireFox browsers.

I found today that Chorme also support the round corners, but unfortunately under a different name. It uses the property name “-webkit-border-radius” (notice the -webkit prefix to make it Chrome specific). So add one more thing to the comparability list.

Here is one quick example on how you can apply this for both browsers:

<div style="background-color:gray;-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid black;padding:8px;">Some sample content</div>

And here is the sample output:

BTW, Petter Gasston covers this round border property conflict in detail with examples. So if you are interested to read more on this, check this link:
http://www.css3.info/border-radius-apple-vs-mozilla/