CODEWITHSUNDEEP
htmlcssbordertransparencypadding
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4863

How do I make a semi-transparent border with CSS?

I have a popup and I want to give it a transparent border. I have these properties set:

li.sub-nav ul.megamenu {
    position: absolute;
    left: 0;
    margin-top: 10px;
    z-index: 100;
    padding-top: 3px;
    -moz-background-clip: border; /* Firefox 3.6 */
    -webkit-background-clip: border; /* Safari 4? Chrome 6? */
    background-clip: border-box;
}

.nav-top-container .megamenu {
    background: #005525;
    background: rgba(0, 85, 37, .98);
    border-top: 1px solid #227b33;
    border-bottom: #005525;
    border-bottom:8px solid rgba(0, 85, 37, .98);
}

I added the background-clip properties according to this article, I also tried setting it to content and padding, but it isn't working.

Upvotes: 0

Views: 2913

Answers (2)

castletheperson
castletheperson

Reputation: 33516

Use background-clip on the padding, as it is the closest box-model to the border. The default is border, which causes the background to be behind the transparent border.

body {
  background: yellow;
}
div {
  padding: 30px;
  background-color: white;
  border: 15px solid rgba(255,0,0,0.5);

  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  
}
<div></div>

Upvotes: 2

Robert
Robert

Reputation: 6967

As I indicated in my comment to @LGSon, the issue you are frustrated with is that the background of your element extends into the border area. An easy workaround for this is to apply that background to a nested element like in the following example:

https://jsfiddle.net/yqx7abd8/

body {
  background: url(http://lorempixel.com/800/800/city/1) center / cover;
}

.border {
  margin: 30px;
  border: 15px solid rgba(255,0,0,0.3);
}

.content {
  background: #fff;
  padding: 30px;
}
<div class="border">
  <div class="content">
    <p>
    My Content
    </p>
  </div>
</div>

Upvotes: 1

Related Questions