Round Corners using CSS

By Akbar

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:

Some sample content
Some sample content

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:

Tags: , ,