Rounding Corners of 3:1 Aspect Photo

Darter02

I'm experimenting with a new page design. I just discovered that the only things I don't have rounded corners for at this time is single photo blocks in the 3:1 aspect ration. Does anyone know the division ID of those?

thenickdude

The code here should do it:

http://www.sherlockphotography.org/Customisations/Rounded-corners

Use the 'image in a "single photo" block' code.

You can restrict it to only apply to single photos with the 3x1 ratio with:

/* Round image in a "single photo 3x1 aspect" block */
.sm-page-widget-image .sm-tiles-3x1 .sm-tile {
	border-radius:8px;
	overflow:hidden;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);	
}

Darter02

Thanks, I tried it but couldn't get it to work. But I thank you anyway! While I was messing with it I found a better way to do what I'm experimenting with, so it all worked out in the end.

Darter02

BTW, I did use your CSS to fix this issue on a different page layout where I had a single 3:1 image. Thanks!