2952 posts
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 more
DDStudios says

Ok here’s my problem, I have a box that I only want top right and bottom right corner to be rounded so that’s the CSS I used :

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

Worked perfectly fine in FF and Chrome, but safari won’t display it.

But Safari rounded corner work really well when every corner are rounded, I tried :

-webkit-border-radius: 5px;

And it worked, but that’s not what I want.

Also, another thing .. I have some inner drop shadow so I use :

-moz-box-shadow: inset 0 0 180px #000;
-webkit-box-shadow: inset 0 0 180px #000;

Again, work really well on FF and Chrome, but not on Safari ..

Somebody know what’s wrong?

4265 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
 border-radius: 0 5px 5px 0;
Chrome and Safari doesn’t need the -webkit prefix anymore. You can leave it as a fallback.
12 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
  • United States
e5302 says

The round corners work for me in Safari 5.

Safari 4 does not support inset the way you are using it. It will skip the entire property if you use ‘inset’. Safari 5 supports it.

2952 posts
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 more
DDStudios says

Thanks guys, Safari 5 work much better ;)

BTW , can you specify a certain value for inset shadow for Chrome and one for Safari, because on safari its SO slow so I would put it smaller …

629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
VagrantRadio says

Previous versions of Safari do not support shorthand values for different border radius values. they all have to be the same or list each one longhand. You can’t use:

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

it has to be:

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0;

And you can also set multiple box shadows in the same declaration with different values. I use inset at the end of the declaration and it works in every modern browser.

box-shadow: 0 1px 1px #333, 1px 1px 3px #333 inset;

Also don’t be afraid to bust out some rgb:

border-radius: 0 1px 1px rgb(255,255,255);

Or (doesn’t work in IE of course) rgba that includes opacity:

border-radius: 0 1px 1px rgba(255,255,255, 0.2);
2952 posts
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 more
DDStudios says
Previous versions of Safari do not support shorthand values for different border radius values. they all have to be the same or list each one longhand. You can’t use:
-webkit-border-radius: 5px 5px 0 0;

it has to be:

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0;

And you can also set multiple box shadows in the same declaration with different values. I use inset at the end of the declaration and it works in every modern browser.

box-shadow: 0 1px 1px #333, 1px 1px 3px #333 inset;

Also don’t be afraid to bust out some rgb:

border-radius: 0 1px 1px rgb(255,255,255);

Or (doesn’t work in IE of course) rgba that includes opacity:

border-radius: 0 1px 1px rgba(255,255,255, 0.2);

Thanks Jason, this really help me.

629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
VagrantRadio says
Thanks Jason, this really help me.

You’re welcome.

4 posts
  • Has been a member for 3-4 years
Willabee says

Inset problems with Safari

You guys seem to know a lot about Safari and I have a similar inset issue.

I was playing around with an old business site of mine getting ready by testing how I will utilise XHTML , CSS and JavaScript so everything validates and browsers only download what they need to progressively enhance towards a CSS3 experience.

I had to change the rules I gave to Webkit (Which also degrades Google Chrome) because Safari incorrectly rendered my original page. I ended up using a gradient instead.

http://www.itevolution.co.uk is my fix. Compare Safari with Firefox, IE9 or Opera 10.

I put the original page at http://www.itevolution.co.uk/safari.html so you can see the Safari issue and also see that Chrome behaves.

Interestingly, my CSS3 style-sheet would not validate until I put the shadow value as the last value in the box-shadow property.

box-shadow: inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad, 5px 10px 16px rgba(66, 140, 240, 0.5);

Would like to get Webkit on-board with my insets.

Any Help appreciated.

193 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 100 and 1 000 dollars
Kontent says

Inset problems with Safari

You guys seem to know a lot about Safari and I have a similar inset issue.

I was playing around with an old business site of mine getting ready by testing how I will utilise XHTML , CSS and JavaScript so everything validates and browsers only download what they need to progressively enhance towards a CSS3 experience.

I had to change the rules I gave to Webkit (Which also degrades Google Chrome) because Safari incorrectly rendered my original page. I ended up using a gradient instead.

http://www.itevolution.co.uk is my fix. Compare Safari with Firefox, IE9 or Opera 10.

I put the original page at http://www.itevolution.co.uk/safari.html so you can see the Safari issue and also see that Chrome behaves.

Interestingly, my CSS3 style-sheet would not validate until I put the shadow value as the last value in the box-shadow property.

box-shadow: inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad, 5px 10px 16px rgba(66, 140, 240, 0.5);

Would like to get Webkit on-board with my insets.

Any Help appreciated.

Okay first of all.

Please don’t bump a 9 day old resolved thread it’s not only sad, it’s not smart either. Secondly, feel free to make a new thread outlining your issue I’m sure someone will help you out.

All the best.

3118 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
  • Exclusive Author
chrisakelley says

Inset problems with Safari

You guys seem to know a lot about Safari and I have a similar inset issue.

I was playing around with an old business site of mine getting ready by testing how I will utilise XHTML , CSS and JavaScript so everything validates and browsers only download what they need to progressively enhance towards a CSS3 experience.

I had to change the rules I gave to Webkit (Which also degrades Google Chrome) because Safari incorrectly rendered my original page. I ended up using a gradient instead.

http://www.itevolution.co.uk is my fix. Compare Safari with Firefox, IE9 or Opera 10.

I put the original page at http://www.itevolution.co.uk/safari.html so you can see the Safari issue and also see that Chrome behaves.

Interestingly, my CSS3 style-sheet would not validate until I put the shadow value as the last value in the box-shadow property.

box-shadow: inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad, 5px 10px 16px rgba(66, 140, 240, 0.5);

Would like to get Webkit on-board with my insets.

Any Help appreciated.

if you want full cross-browser support CSS3 it will not validate because you have to use prefixes and make sure your using the latest version of safari inset box shadow works fine, it doesnt work in safari 4 however

by
by
by
by
by
by