CODEWITHSUNDEEP
rounded-cornerscss
EspenA
EspenA

Reputation: 121

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>

Upvotes: 7

Views: 8799

Answers (2)

Zajec
Zajec

Reputation: 116

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;

 

Upvotes: 10

user241244
user241244

Reputation:

FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:

border-radius: 10px; border: 1px solid #fff; making it: border-radius: 10px;

I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.

Upvotes: 3

Related Questions