Avoid Background Color From Border Color

I have a div with a background color of rgba(255,0,0,1), and a border color of rgba(0,255,0,0.2), and a 10px border-radius. The problem is that the border color have the background

Solution 1:

If I understand correctly, you can use box-shadow, which sits outside the border:

div {
  background-color: rgba(255, 0, 0, 1);
  box-shadow: 00010pxrgba(255, 0, 0, 0.5);
  border-radius: 10px;
  width: 200px;
  height: 200px;
  /*extra styling*/margin: 50px;
}

/*Just for demo so you can see the transparency*/body {
  background: #fffurl(http://www.destination360.com/north-america/canada/images/s/canada-cn-tower.jpg) repeat;
}

<div>Red half-opacity box-shadow</div>

Solution 2:

Use background-clip: content-box; or background-clip: padding-box;

From MDN

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

---

div{
  background-color: rgba(255,0,0,1);
  border: 10px solid rgba(0,255,0,0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
  background-clip: content-box;
}

<div></div>

Solution 3:

What you need is the background-clip attribute:

div {
  background-clip: padding-box;
  background-color: rgba(255,0,0,1);
  border: 10px solid rgba(0,255,0,0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
}
article {
  background-clip: padding-box;
  margin: 10px;
  margin-top: 20px;
  background-color: rgba(255,0,0,1);
  outline: 10px solid rgba(0,255,0,0.2);
  outline-radius: 10px;
  width: 200px;
  height: 200px;
}

<div></div><article></article>

Solution 4:

Try using two div.

div.outer {
  border: 10px solid rgba(0, 255, 0, 0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
}
div.inner {
  background-color: rgba(255, 0, 0, 1);
  height: 100%;
  width: 100%;
}

<divclass="outer"><divclass="inner"></div></div>