CODEWITHSUNDEEP
csshtml
xiiJaMiiE
xiiJaMiiE

Reputation: 359

Can you make the border transparent?

In CSS is there a way to make the border transparent, but the box (inside) with the border the same?

Please see this link: http://jsfiddle.net/xiiJaMiiE/LfWBn/14/

#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
background:white;
z-index:1;
width:80%;
border:5px #0F0 solid;
}

I would like to know if I can make the green border 0.6 opacity and keep the white inside normal.

Is that possible or would I have to make 2 divs on top each other?

Thanks in advance!

Upvotes: 1

Views: 724

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106048

this answer to add some info only. (3 ways : box-shadow:outset x x x ; or box-shadow: inset x x x; , or background-clip )

if you want opacity on borders and see through background of parent container, and not mixe with the background of the element itself, you can draw the background-color with inset shadow. http://jsfiddle.net/Y78Ap/1/ (increased voluntary border-width and added a gradient to body to have it more 'telling')

html,body {
 Background-color:rgba(255,165,0,0.5);
    background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.3));
 }

#white_box {
    position:absolute;
    min-width:90%;
    max-width:90%;
    margin:0 auto;
    height:92%;
    top:0%;
    left:5%;
    right:5%;
    box-shadow:inset 0 0 0 2000px white;
    z-index:1;
    width:80%;
    border: 15px rgba(0, 255, 0, 0.6) solid;
}

You can as well just draw borders with box-shadow: 0 0 5px rgba(0,255,0,0.6); instead border

The easiest way suppose to be, nowdays, is background-clip : http://css-tricks.com/transparent-borders-with-background-clip/

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

Here if you want fully transparent than, you can use border-color: transparent- 

border: 5px solid transparent;

Try in fiddel

Unfortunately, in Explorer, border-color: transparent is rendered as black.

Or if you you only want partially-transparent border, than you can use rgb with alpha transparency- 

border: 5px solid rgba(255, 255, 255, 0.5); // 0.5 means 50% of opacity

The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)

Try in fiddle

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241188

You could just use: border: 5px rgba(0, 255, 0, 0.6) solid;

UPDATED EXAMPLE

#white_box {
    position: absolute;
    min-width: 90%;
    max-width: 90%;
    margin: 0 auto;
    height: 92%;
    top: 0%;
    left: 5%;
    right: 5%;
    background: white;
    z-index: 1;
    width: 80%;
    border: 5px rgba(0, 255, 0, 0.6) solid;
}

Alternatively, you could use outline too; both have different results.

outline: 10px solid rgba(0, 255, 0, 0.6);

EXAMPLE HERE

Upvotes: 5

Related Questions