Parts of background-image visible when using border-radius

css, rounded-corners

Solution

I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/

background-clip: padding-box;  
-moz-background-clip: padding;  
-webkit-background-clip: padding;

Problem

Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why? ``` <!doctype html> <head> <title>Testcase for rounded corners on submit button with bg-image</title> <style type="text/css"> input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px } </style> </head> <body> <form> <div><input type="submit" /></div> </form> </body> ```

Original source