Jump to content
Sign in to follow this  
apattee

Rounding corners with shadows

Recommended Posts

apattee

I searched here and found how to do both things separately, but they don't seem to be playing nicely together. Please take a look at my site and let me know if you can come up with any way to fix it. Thanks for your help. http://dev.leportschools.com/

Share this post


Link to post
Share on other sites
tsalstrand
Hi Apattee, Could you provide a URL to the specific page that you are working on? Your website is rather large for us to hunt down where you are testing shadows/corner rounding. ;)

Share this post


Link to post
Share on other sites
apattee
Sure, but it's actually every page. I think it's the page-canvas. You'll see on the home page that there are rounded corners, but they aren't displaying quite the way I want.

Share this post


Link to post
Share on other sites
catrina
Can you please post the custom CSS you're using to create the rounded corners and shadows?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
apattee
Sure, this is placed in the style.css on my platform base. #branding .content { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; border-top-right-radius: 15px; border-top-left-radius: 15px; } #morefoot_area .sb_universal-bottom div.content { -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright:15px; -webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .page-canvas, #page { border-radius: 15px; } #page-canvas { -webkit-box-shadow: 0px 0px 25px #000; -moz-box-shadow: 0px 0px 25px #000; box-shadow: 0px 0px 25px #000; }

Share this post


Link to post
Share on other sites
catrina
I'm not certain if it's possible for box shadows to be added to rounded corners using CSS, but there is a way with border images (the rounded corner images can have shadows added to them and CSS can be used to implement these images as borders). For reference, please see here (the bottom instructions): http://www.w3schools.com/css3/css3_borders.asp

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×