Question

Let assume that I have image with border: 1 px solid black because i want it to have border. But for more i want rounded corners so i give border-radius: 10px. But this now looks bad because corners don’t have border. Is there possibility in html and css to do something which give borders to corners or answer is maybe somewhere in (for example) in jQuery?

Answer 1

sure just put the border on too.. and where there’s a background color you can use an image, however IE support will be non-existant, but you might try CSSPie for enhancement for it. I think also some browsers do have a problem clipping on image to the round corners but am not too sure on overall support or fixes, perhaps putting the border on a parent div then rounding the image inside it might give a neat effect?

Example Fiddle

div, img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #000;
    background: #0f0;
    width: 200px;
    margin: 50px;
    text-align: center;
    line-height: 40px;
}

HTML:

<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">

---

Update: Webkit browsers do have problems with this if it’s actually an image that needs rounding with borders, here’s one workaround that seems to help:

New Example Fiddle

(view with webkit to see difference between second and third images)

HTML:

<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>

CSS:

div {
   margin: 50px;
   text-align: center;
   line-height: 40px;
   width: 100px;
   height: 100px;
}

.ri {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -webkit-background-clip: padding-box;
   border: 1px solid #000;
}

.ri img {
   display: block;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -webkit-background-clip: padding-box;
}

the background-clip is supposed to help the background clip to the padding-box, which should in theory stop a background-image or color from extending into the border, but in itself it doesn’t appear to work very well, so I nested the image and rounded both it and the parent div and then put the border onto the parent div, Webkit was happy 😉