CODEWITHSUNDEEP
css
Musty
Musty

Reputation: 101

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

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;

}

Upvotes: 0

Views: 2715

Answers (3)

Matan Berkovsky
Matan Berkovsky

Reputation: 68

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.

Upvotes: 1

vlk
vlk

Reputation: 1454

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>

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9043

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);
}

Upvotes: 2

Related Questions