How to Make a Transparent Border with CSS

How do I make a transparent border with CSS?

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.

Is it possible to have a transparent border?

You can just set the border-color to transparent

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>

How can I make a transparent div that has a non-transparent border?

Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:

.entirebox {

  width: 600px;

  height: 200px;

  border-radius: 15px;

  border: 5px solid black;

}

#box {

  background-color: white;

  opacity: 0.4;

}

<div class="entirebox">

  <div id="box">

    <p>The stuff that you originally had here</p>

  </div>

</div>

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>

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>

How to make button have transparent border that will show background of element below

Another possible option, if you're able to define the width and height of the button, you can use box-sizing. The button will occupy the same amount of space regardless of border style as that will be calculated into its overall size.

button{box-sizing:border-box;width:60px;height:24px}
button:hover{border:4px solid red}