CODEWITHSUNDEEP
htmlcss
renathy
renathy

Reputation: 5355

make border non transparent if div is transparent

Is there some CSS way to make div transparent, but borders not transparent?

HTML:

<div class="ts-twentytwelve-description">into quality solutions</div>

CSS:

border-left: 9px solid #fff;
border-right: 9px solid #fff;
background-color: black;
opacity: 0.86;
filter: alpha(opacity=86);

Upvotes: 0

Views: 345

Answers (3)

Michal
Michal

Reputation: 3632

Try this:

div {
    background-color: rgba(0, 0, 0, .5); // or transparent
    border-color: #fff;
}

EDIT:

You can use this solution:

<div class="border_div">
   <div class="content_div">
       your content here
   </div>
</div>

.border_div {
    border: 5px solid #fff;
}

.content_div {
    opacity: .86;
}

Upvotes: 0

artSx
artSx

Reputation: 1630

You can do that : 

.ts-twentytwelve-description {
border-left: 9px solid #fff;
border-right: 9px solid #fff;
background-color: rgba(0,0,0,.86);
}

With background-color:rgba(value) you can add opacity only for background-color. For IE you have generator here

Upvotes: 2

This Guy
This Guy

Reputation: 1736

Here is a working jsfiddle: http://jsfiddle.net/q4XVZ/2/

CSS:

.ts-twentytwelve-description {
border-top: 1px solid #000;
border-left: 9px solid #000;
border-right: 9px solid #000;
border-bottom: 1px solid #000;
background-color: transparent;
opacity: 0.86;
filter: alpha(opacity=86);
}

HTML:

<div class="ts-twentytwelve-description">into quality solutions</div>

Upvotes: 0

Related Questions