Border RGBA Opacity with a white background

[dtrick]

Hi everyone,
I’m attempting to make a content box with a semi-transparent border. The background for the box is white, which seems to be giving me trouble. Here is the code I’m working with, which seems to work perfectly fine when the background for such a box is not white.

.info {
padding: 15px;
width: 562px;
background: #fefefe;
border: 3px solid rgba(0,0,0,0.3);
margin: 15px 0; }

Am I missing something? Am I crazy? Any suggestions to make this work with a white bg?

Thanks!

[TheDoc]

Adding the background-clip seems to help:

http://jsfiddle.net/c4jZG/

[joshuanhibbert]

@dtrick By default the background of an element also sits behind the border. @TheDoc has wisely suggested using the background-clip property to contain the background to the element and its padding only.

[dtrick]

Perfect! Thanks a lot. I came to realize the default border overlapped with the background and never realized the background-clip property existed.

[Author]

Posts