Comments on: border-radius: Safari vs Mozilla

By: Mort3ZA

Mort3ZA — Sat, 15 May 2010 20:47:40 +0000

oh sorry, it was mistake. safari work with only one property in broder-radius like this:
-webkit-border-radius: 20px;

By: Mort3ZA

Mort3ZA — Sat, 15 May 2010 20:36:13 +0000

this work for safari:
-webkit-border-radius: 20px 4px;

By: Benu Gupta

Benu Gupta — Wed, 28 Apr 2010 06:08:46 +0000

title

Home
About Us
News
Contact Us

#menu ul li {
list-style:none;
display:inline;
}
#menu ul li a {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* Border Shadow */
-webkit-box-shadow: 1px 2px 2px #737373;
-moz-box-shadow: 1px 2px 2px #737373;
box-shadow: 1px 2px 2px #737373;

color: #ffffff;
background:#cccccc;
display: inline-block;
padding: 5px 15px;
outline: none;
text-decoration: none;
}
#menu ul li a:hover {
background: #7F7F7F;
padding: 5px 25px;
}
#menu ul li a:active {
background: rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px #737373;;
-moz-box-shadow: 1px 1px 1px #737373;;
box-shadow: 1px 1px 1px #737373;
}

#menu ul li a {

/* Animation (Webkit, Gecko & Mozilla) */
-webkit-transition-duration: 0.90s;
-webkit-transition-timing-function: ease-out;
-moz-transition-duration: 0.20s;
-moz-transition-timing-function: ease-out;
}

You can use this code its working prefect on safari with animation.

By: Solo los tontos odian flash | Cotoweb Blog

Solo los tontos odian flash | Cotoweb Blog — Sat, 17 Apr 2010 01:57:45 +0000

[...] http://www.css3.info/border-radius-apple-vs-mozilla/ [...]

By: DropSys

DropSys — Tue, 30 Mar 2010 04:44:31 +0000

Here’s the css to get your corners working with FF, Chrome and Safari.

-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;

I added this to get my blog roll to look cleaner and works most browsers… have yet to try IE?
visit the site to see the working example: http://www.frylowcaribbean.com

By: idlelimey

idlelimey — Mon, 29 Mar 2010 09:06:34 +0000

Apologies to Google Chrome, which appears to render webkit and W3C methods! Hats off :)

By: idlelimey

idlelimey — Mon, 29 Mar 2010 09:03:03 +0000

This is a messy situation. The W3C have declared border-radius as the way to do this and only Opera (so far as I know) supports this. Why are FF, Saf, et al not ditching their proprietory methods and going with the standard here? So far, I’m using *3* seperate methods to apply round corners? This is not progress! Well done Opera though for applying sense to CSS3 in a way none of the other browsers seem to be willing to do.

By: Michael

Michael — Sat, 20 Feb 2010 19:10:22 +0000

Konqueror does support -khtml- in the non standard webkit way
-khtml-border-top-left-radius: 10px;
opera joined on now with border-radius
with their own way…Border-topleft-radius: 10px;

@PaulDE
you have to have a different command for each corner, for webkit its
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;

By: PaulDe

PaulDe — Fri, 19 Feb 2010 11:40:19 +0000

I can’t get “-webkit-border-radius” working with 2 different corner sizes with Safari 4… it works fine with one value anyway…

Chrome is working well with “border-radius”

By: Fun with CSS3 and mootools

Fun with CSS3 and mootools — Mon, 01 Feb 2010 17:55:50 +0000

[...] The WebKit pre is slightly different. For some reason i couldn’t get the webkitBorderRadius to work without doing each corner individually. For more info on the differences read this [...]