Is it possible to have a transparent border?

Question

I have this code for my border:

border: 1px solid #CCC;

Is it possible to have some similar CSS where the border is wide but not visible. In other words, if there is a blue background, will it be displayed right across the border?

Answer 1

You can just install border-colorontransparent

Answer 2

Margin takes up space and is transparent. The space occupied by the field is outside the element, so it takes the background color of the parent element. If you want this to be a space with the same background color as the element you are editing, you would like to use indents.

, , , , : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 3

, .

.

, "", , background-clip:padding-box ( content-box, ).

boxshadow (), .

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>

Hide result

Answer 4

, . rgba color defination :

border: 10px solid rgba(50,50,50,.5);

The last value of 0.5 goes from 0 to 1 and is the opacity value (or alpha) for the color

Working example (see how border transparency changes on hover): jsFiddle