Weird Border Opacity Behavior in Webkit

Weird border opacity behavior in Webkit?

Bug on the Chrome issues list (guess what, nobody cares):

http://code.google.com/p/chromium/issues/detail?id=36475&q=transparent%20border%20color&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

Taking a look at the spec, this indeed seems like a bug:

http://www.w3.org/TR/css3-background/#box-shadow-samples

The examples, too, have an inner border with alpha and show Firefox like behavior.

Strange css border behaviour in webkit

This is a bug in Chrome. Forcing the page to redraw (by zooming, or any other method) shows the red box in the right place.

I am not aware of any workaround for this, unfortunately.

Can you set a border opacity in CSS?

Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

For extremely old browsers that don't support rgba (IE8 and older), the solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

I've added background-clip: padding-box; to the examples above to ensure the border remains transparent even if a solid background color is applied.

Rounded corners on transparent borders are doubling translucency in Chrome

This is a known bug of Webkit, you can either add a wrapping container to fake the border and apply border-radius, or change the opacity value or the border slightly (this will produce some faint lines on the corner of your element.

See demo here: http://jsfiddle.net/duopixel/hG9W8/

And here is the a similar question to yours:
Weird border opacity behavior in Webkit?

Strange behavior using CSS border radius

Like T.J. noted, something has a red background on it that's higher up in your DOM tree. Adding the border radius to your corners is exposing that. Use your browser's inspector to find it. Should be a quick fix.

How to make the contents of an element with round-cornered border be also round-cornered?

http://jsfiddle.net/XjsWZ/3/ maybe?

** edit **

I prefer JamWaffles':

.outer{
    width: 290px;
    height: 290px;
    border: solid 10px;
    border-radius: 15px;
    border-color: rgba(0, 0, 0, 0.5); 
    background-clip:padding-box;
    background-color:white;
    padding: 5px;  
}

Or if you want different looking corners there's a variant of Jedidiah's:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}

.inner{
    border-radius: 5px;
    background-color: white;
    height: 100%;
}

Strange border-width behavior in Chrome - Floating point border-width?

To reproduce your problem I have to change the zoom-level of Chrome. Changing the zoom-level back to 100% fixes it. It appears to be a bug, the calculated border width is always smaller than the defined border width, zooming in or out!

Your 10px border does give a value of 10 when the zoom-level is 110%, but on 125% it has the same problem as your 3px border.

edit: firefox has the same behavior!

---

Related Topics