How do I do rounded corners in CSS in Google Chrome

Google Chrome (and Safari) work with the following CSS 3 prefixes

-webkit-border-radius: 10px;

for all corners at 10px

-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;

for the top left corner and bottom left at 8px

For Firefox you can use:

-moz-border-radius: 10px;

for all the corners and

-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;

for the top left corner and bottom left

css google-chrome border

To cover both Chrome, FF and any browser that supports CSS 3:

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

css google-chrome border

It's future-useful to code your css like this:

border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;

That way, when IE9/IE10 comes out your code will also work there as well :D

CodeHunter