如何制作具有不透明边框的透明div？

Question

i created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?

CSS:

#box{
   background-color:white;
   opacity:0.4;
   width:600px;
   height:200px;
   border-radius:15px;
   border: 5px solid black;

}

Answer 1

You cannot make part of an element one opacity and another part of that same element another opacity.

Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/

Try using rgba() for background color instead - or wrap the element in something.

.box {
  background: rgba(255, 0, 0, .5);
}

Answer 2

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> 

Here, I added the containing div and named it entirebox . Notice how the containing div has a class, while the div you started off with still has an id.

Hope this helped.

Answer 3

if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:

 body{ margin: 0px; } div.child { display: block; position: relative; width: 200px; height: 150px; background: red; opacity:0.3; } div.parent{ display: inline-block; position:relative; border: 4px solid black; top: 0px; left: 0px; } 

 <div class="parent"> <div class="child"> </div> </div>