How to Make a Transparent Border Using CSS

How do I make a transparent border with CSS so that contents don't shift position?

You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

How to make a transparent border using CSS?

Well if you want fully transparent than you can use

border: 5px solid transparent;

If you mean opaque/transparent, than you can use

border: 5px solid rgba(255, 255, 255, .5);

Here, a means alpha, which you can scale, 0-1.

Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.

For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.

Demo

Demo 2 (With a background image for nested div)

Demo 3 (With an img tag instead of a background-image)

body {
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);   
}

div.wrap {
    border: 5px solid #fff; /* Fall back, not used in fiddle */
    border: 5px solid rgba(255, 255, 255, .5);
    height: 400px;
    width: 400px;
    margin: 50px;
    border-radius: 50%;
}

div.inner {
    background: #fff; /* Fall back, not used in fiddle */
    background: rgba(255, 255, 255, .5);
    height: 380px;
    width: 380px;
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
                         manually calculated*/
}

Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.

CSS: transparent border for a div

You'd probably have a more consistent UX if you used padding instead of a border

.semi-transparent {    background-color: rgba(0, 0, 0, 0.5);  }  .padded {    padding: 6px;    padding: .5rem;  }  .bg-white {    background-color: #FFFFFF;  }  .rounded {    border-radius: 3px;    border-radius: .25rem;  }

<div class="semi-transparent padded rounded">  <div class="bg-white rounded padded">    Your Content  </div><div>

Is it possible to have a transparent border?

You can just set the border-color to transparent

Can you set a border opacity in CSS?

Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

For extremely old browsers that don't support rgba (IE8 and older), the solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

I've added background-clip: padding-box; to the examples above to ensure the border remains transparent even if a solid background color is applied.

Transparent border around items on background

My thought process

The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.

Example:

.bg {  position: relative;  height: 250px;  width: 500px;  background-image: url(https://i.imgur.com/nRXO8xa.jpg);}
.border {  height: 20px;  position: absolute;  top: 0;  bottom: 0;  left: 30px;  margin: auto;  padding: 10px;  background: steelblue;  border: 10px solid black;}
.no-border {  height: 20px;  position: absolute;  top: 0;  bottom: 0;  right: 30px;  margin: auto;  padding: 10px;  background: steelblue;  border: 10px solid #F7F2D5;}

<div class="bg">  <div class="border">black border</div>  <div class="no-border">"transparent" border</div></div>

How to make transparent border show box shadow underneath and not the div's background colour?

Edit:

You may achieve it with pseudo element using some workaround:

body {
  background-color: #ddd;
  margin: 0;
  padding: 10px;
}

div {
  /* change the border width here */
  --border-width: 10px;
  
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: var(--border-width);
  position: relative;
}

div::before {
  content: '';
  display: block;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  margin: calc(var(--border-width) * -1);
  position: absolute;
  border-radius: inherit;
}

div:hover {
  box-shadow: 0px 4px 15px transparent;
}

div:hover::before {
  background-color: white;
  z-index: -1;
}

<div></div>

Transparent border-color not working as expected

It's all about background-clip which default value is border-box (https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) so the background will logically cover the border area.

Change it to something else and you will see the border in the second case.

div {  width: 100px;  height: 50px;  border: 5px solid;  background-clip: padding-box;}
#one {  border-color: transparent;  background-color: #ccc;       /* <--- changed */
  position: absolute;}
#two {  border-color: firebrick;  background-color: lightblue;}

<div id="one"></div><div id="two"></div>

---

Related Topics