Archived

This topic is now archived and is closed to further replies.

  • 0

Feature rounded corners and shadow


Question

Posted · Report post

I've see many topics on the subject but none seem to work.

 

I need to add rounded corners to all my feature sliders... I have a lot of them, so I'd prefer CSS than editing each of them in Photoshop. Right now I'm using this: #feature-area {border-radius: 10px;} It seems to work on the first slide only. http://thewinesyndicate.ca

 

Also, is there a way to crank up the size of the shadow around the features?

 

Thank you,

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi, ok downloaded safari and the inspector and had a play.

 

The following seems to work, I tried isolating some of the below to find the correct one, but it only seemed to take if they were all in place like they were in firebug - http://screencast.com/t/vvLkLmvp

.fset_height, #feature_slider .text-bottom .fmedia .fmedia-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .fmedia-pad {
-webkit-border-radius:20px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Seems to be a Safari only issue... Any suggestions?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Try adding another line of code in addition to the one you have with the -moz- prefix.

 

eg: -moz-border-radius: 15px;

 

That should handle safari.

Share this post


Link to post
Share on other sites

Posted · Report post

Just tried it... Didn't work. I guess I'll have to live with it.

Share this post


Link to post
Share on other sites

Posted · Report post

Just tested on iPad/iPhone, etc... with Safari. Works perfectly. Thank you.

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent, you're welcome, glad it worked :-)

Share this post


Link to post
Share on other sites