My friend handed me a mock-up of a part of my site, and I'm having trouble implementing it. He has rounded corners on the top-right and bottom-left of an image. The hand-drawn black box below is the original image. I tried using border-radius, but that doesn't cut into the actual image; the corners are still visible. Does anyone recognize this; can anyone tell me how I might do this?

If photoshop is the only solution, so be it, but I'd rather be able to do this with CSS.

5 answers

Mottie 1134
1
point
This was chosen as the best answer

Try this CSS (demo)... I used your image above, so the repositioning of the background was only to accommodate that particular image.

HTML

<div id="image"></div>

CSS

#image {
 background: url(http://www.jenkskeyclub.org/border-radius.JPG) -15px -25px no-repeat;
 border: #ddd 8px solid;
 border-radius: 3.5em 0;
 -moz-border-radius: 0 3.5em;
 -webkit-border-radius: 0 3.5em;
 box-shadow: #666 3px 3px 10px;
 -moz-box-shadow: #666 3px 3px 10px;
 -webkit-box-shadow: #666 3px 3px 10px;
 width: 260px;
 height: 255px;
}

Update: oops forgot the drop shadow.

Answered almost 9 years ago by Mottie
0
points

If you make it a background image on a block element then border-radius should clip it off, but odds are good your actual borders won't look that clean.

Answered almost 9 years ago by Nathan Duran
Doug 1095
0
points

One solution would be to create a single "framing" image that includes the white border, drop shadow, etc. with a transparent middle, and overlay that on top of each image. (Only works if the background is a consistent color.)

Answered almost 9 years ago by Doug
0
points

This tool - http://www.acqualia.com/picturesque/ - makes images like that, and for full cross browser compatibility at the moment, that would be the approach I'd take. either make the frame (as a background image) and drop square images onto it, or make images with the frame and drop shadow to suit.

Sometimes an effect is too much trouble to recreate with CSS, when a quick meddle with an image creation tool is the answer...

Answered almost 9 years ago by Tony Crockford
0
points

Try using this, you'll need to change it up a bit to work more to your liking. It also allows for the image to be saved if the user would like to.

HTML

<div class="rounded-image"><img src="image.png"></div>

CSS

.rounded-image {
background-image: url('image.png');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.rounded-image img {
opacity: 0;
}
Answered almost 9 years ago by David Summerton
  • Why do you need both `<img src="image.png" />` and `background-image: url('image.png')`? Isn't that redundant or is it for possible lack of CSS support? Christian Mann almost 9 years ago
  • Never mind, I'm an idiot. I understand why now. Christian Mann almost 9 years ago