How do I do rounded corners in CSS in Google Chrome

css google-chrome border

21,231

Solution 1

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

Solution 2

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

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

Solution 3

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

Solution 4

Yes but the only problem with this is that you are actually throwing css errors because of IE being jacked and Microshaft not wanting to do anything about it, the fix that i use is js based but I imagine most people know all about that. But, the reason I use it is because it always works for me and on all the major browsers. Here you go.

var obj= document.getElementById('divName');
var browserName=navigator.appName; 
var browserVer=parseInt(navigator.appVersion); 
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
    obj.style.MozBorderRadius = "15px";
    obj.style.WebkitBorderRadius= "15px";

}

View more solutions

21,231