views:

307

answers:

2

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>

+2  A: 

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'.

D_N
I tried removing the border declaration and add -moz-border-radius as well, but then I get a gray border around almost the entire submit button. Please see: http://skriblerier.net/div/rounded-corners-input/without-border.html — happens in Chrome, Firefox and Opera.
EspenA
Ah, got it. I need to reset the border declaration, not remove it entirely :) So, basically: border-radius: 10px; border: 0; does the trick.Thanks!
EspenA
@EspenA No problem. To cover your bases, use -webkit-, -moz-, *and* the normal, prefixless version, as you get when you use this tool, for example: http://border-radius.com/ (-webkit- will get older versions of Safari/Chrome).
D_N
Yeah, I know (about the prefixes). I just don't bother adding all kinds of prefixes while debugging. :)
EspenA
Ah, okay, got it.
D_N
+2  A: 

I workarounded 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;

Zajec
a-ha! it's "padding", without the "-box". thanks! this doesn't highlight the difference: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
gryzzly