Jump to content

Box-shadow on image with border-radius: 18px...? Is this possible?

Recommended Posts

Site URL: https://www.ditbaderum.dk/

Hi,

So when trying to add a box-shadow to pictures with a border radius of 18px it adds a shadow to the corners in a weird way making it look like a square and not round corners. I tried editing the photo in Photoshop and giving it the border-radius and exporting as png, but this didnt work either. I dont know if its cause you cant untarget the block?

Best regards,
Kasper

Link to comment

this is because squarespace puts your picture inside a container that clips the drop shadow.

Here are two ways to fix it:

one way to get round this is to make the picture slightly smaller and centre it within the container such that there's enough room to paint the drop shadow in.

e.g. this uses a block id (I'm assuming you know how to do this as you're already using css to round the corners of the image, you could use a different selector too provided it targets this image) to make enough space for a 15px drop shadow that isn't offset at all. so you need 30px of space for the border and you need  to centre the picture by moving it 15px in and down.

<style>
div#block-yui_3_17_2_1_1629708330504_4906 .sqs-image-content img {
	width:calc(100% - 30px) !important;
	height:calc(100% - 30px) !important;
  	margin-left:15px;
  	margin-top:15px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 0px;
    border-radius:10px;
}
</style>

you could do this in a number of ways by playing around with the block itself, rather than the image. this will be important if for example you've resized the containing block so that its cropping the image. however, the principle will be the same, make enough space for the drop shadow to paint within its container and you'll be fine. 

Another solution is to alter the overflow property of the container from hidden to visible, and whilst you can do that, squarespace uses the hidden overflow a lot to help with its responsive layouts and "focus point" centring of pictures, so it will cause a lot of side effects if you get it wrong. this should resolve it if you've just used a standard image block.

<style>
div#block-yui_3_17_2_1_1629708330504_4906 .sqs-image {
    overflow:visible !important;
}
div#block-yui_3_17_2_1_1629708330504_4906 .sqs-image-content  {
  	border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 0px;
}
</style>

I think I probably prefer the first one as it doesn't muck around with squarespaces box layout that much, but I think either will be fine.

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.