Is it possible to have a transparent border? - html

Question

I have this code for my border:
border: 1px solid #CCC;
Is it possible to have some similar CSS where the border has a width but it's not visible. In other words if there's a blue background then that would show right through the border?

Answer 1

A margin occupies space and is transparent. The space a margin occupies is on the outside of the element, so it takes the background color of the parent element. If you want it to be space with the same background color as the element you are modifying, you would want to use padding.
This is a great resource that shows you what you will probably want:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 2

Yes, it's entirely possible.
Normally, a transparent border would show the background color of the element beneath it.
This can be overcome by restricting the background to the "box" holding the padding & content using background-clip:padding-box (or optionally content-box which would clip the background to the content area only).
Then you can add a boxshadow (for instance) which will sit outside the transparent border.
body {
background: linear-gradient(to bottom, orange, pink);
}
div {
width: 200px;
height: 200px;
box-sizing: border-box;
background: rebeccapurple;
margin: 2em auto;
border: 10px solid transparent;
box-shadow: 0 0 5px 5px green;
background-clip: padding-box;
}
<div></div>

Answer 3

You can just set the border-color to transparent

Answer 4

Yes it is possible to have transparent border. Just use rgba color defination like so:
border: 10px solid rgba(50,50,50,.5);
The last value 0.5 goes from 0 to 1 and is a opacity (or alpha) value for the color
Working example (see how the border transparency changes on hover): jsFiddle