2

I am trying to add rounded corners to Anything slider.

here's a Fiddle: http://jsfiddle.net/techydude/DUxqc/2/

I basically want there to be a container that masks the images giving a rounded corner appearance. I added rounded corners to the active <li> but upon clicking the green box to go to the next slide, you can see the square corners on the next slide when it's sliding in. Does anyone have any ideas? I would appreciate any help!

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
TechyDude
  • 1,165
  • 3
  • 16
  • 24
  • This may actually be [a bug in WebKit](https://bugs.webkit.org/show_bug.cgi?id=67950) (http://stackoverflow.com/questions/7730807/chrome-safari-loses-rounded-corners-during-a-jquery-slide-transition) – Matt Ball Mar 31 '12 at 15:39
  • THANK YOU MДΓΓ БДLL It was actually just a glitch in chrome. I used -webkit-mask-box-image:url(mask.png); and it fixed the glitch on chrome. Thanks again! – TechyDude Mar 31 '12 at 15:48
  • Since you should solved your own question, you should [post the solution as an answer, and accept that answer](http://meta.stackexchange.com/questions/17463/can-i-answer-my-own-questions-even-those-where-i-knew-the-answer-before-asking) when the site will let you. `:)` – Matt Ball Mar 31 '12 at 15:50
  • I cant post an answer yet because I'm new here. But I will once 8 hours passes :) But I have another question. Since there is a mask in chrome around the container - I cannot apply a drop shadow to it. Do you have any ideas for this? – TechyDude Mar 31 '12 at 16:23
  • I also figured this out! I used the :before – TechyDude Mar 31 '12 at 17:21

1 Answers1

0

Thanks to MДΓΓ БДLL for all his help! With the refrences he provided I was able to figure out the issue: a webkit glitch It was actually just a glitch in chrome. I used -webkit-mask-box-image:url(mask.png); and it fixed the glitch on chrome.

TechyDude
  • 1,165
  • 3
  • 16
  • 24