39

Is it possible to add border-radius on background-image ?

Berkay Turancı
  • 3,373
  • 4
  • 32
  • 45
Michał Urban
  • 465
  • 2
  • 5
  • 7
  • 2
    Background image of a div, background image of the actual page..? What do you mean? Need more information. – Bart Jan 16 '13 at 08:09
  • 2
    How is it possible this question is upvoted twice? It is of very poor quality. Have you tried anything yet? Did you try to Google it? What is your definition of "background-image" because as @Bart mentioned already, is it the background of your `body`, a random `div` or maybe even a `pre` element? Please be more specific. – Jelmer Jan 16 '13 at 08:26
  • 1
    1. Background image of div 2. I don't want to crop background-image by border-radius set on div, because my background image is in the middle and doesn't touch with div border so background-image isn't cropped. – Michał Urban Jan 16 '13 at 08:59

2 Answers2

23

Yes it is possible:

div {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: none;
  width: 500px;
  height: 335px;
  background: url(http://themescompany.com/wp-content/uploads/2012/02/6402.jpg);
}

Click here for demo.

David Czinege
  • 519
  • 4
  • 10
  • 8
    This is nice, but what if I would add `background-position: 50px background-repeat: no-repeat`. Background-image is **only** cropped by border of div. – Michał Urban Jan 16 '13 at 09:00
  • 1
    I think there is no way to add border-radius directly to the background-image, but you can do that with a cheat: http://jsfiddle.net/fbDZb/8/ – David Czinege Jan 16 '13 at 10:30
  • David Czinege, thanks, unfortunately I looked for solution without additional div. Thanks anyway :-) – Michał Urban Jan 16 '13 at 13:24
  • 2
    has anyone had any issues with this using an SVG for a background? if i have it `background-size:cover;` the display of the image is messed up – Andrew Brown Oct 03 '16 at 04:06
  • Yep, I'm having the same problem @AndrewBrown - did you find a solution? – Codemonkey Oct 18 '18 at 12:02
  • This solution does not work with inline elements such as `span`. If you are using this with a `span`, you will need to explicitly set `display: block;` or `display: inline-block;` – J. Munson Dec 04 '18 at 16:54
  • 1
    No, it's not possible - should be a valid answer. If contained image is smaller than surrounding box, the example above won't work. A potential workaround could be done with e.g. `background-size: cover` or similar. – lubosdz Apr 18 '20 at 12:11
0

Try this

div {
  border: 10px solid white;
  -moz-border-radius: 10px;
  background:url(map_background_box_right.png);
}
ravshansbox
  • 748
  • 11
  • 21
Nandu
  • 3,076
  • 8
  • 34
  • 51
  • 1
    for crossbrowser you need -moz-border-radius: 50px; and if you have to optimize the old ie's, you can't do this without external scripts like pie.htc [link](http://css3pie.com/) – Holger D. Schauf Jan 16 '13 at 08:55