Search code examples
rounded-cornerscss

Parts of background-image visible when using border-radius

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>

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;