View Full Version : Opacity to borders?

Apr 6th, 2010, 08:32 PM
I need to make my borders with a certain degree of opacity:

#container {
font-size: 1.2em;
background: url('img/container.png') repeat-y;
margin: 0 auto;
width: 840px;
border: 12px solid #000;
color: #069;


I have made an image 12px by 12px which is of the correct opacity, is there anyway to tile this around all 4 sides of my container?

Apr 6th, 2010, 08:40 PM
i'd create a div that is X pixels wider/higher than the "container" and set its background to be that of the transparent image. could probably be achieved with padding...

#transparent { padding:5px; background:url(img/container.png) repeat; }
#solid { width:100px; height:100px; background:red; }

<div id="transparent">
<div id="solid"> </div>

visually it would look like a border, but it would actually be 2 divs if that makes sense.

i'm not aware of any way to make ~just~ a border transparent without affecting the rest of the content.

edit: you'll need to find a way to control the width of the "transparent" div if #solid is of varying width/height. You could wrap both in a fixed width container. you'll see what i mean if you try the above.