Search code examples
cssopacityborder-image

Border image with opacity

I have this:

.striped-border {
    border: 8px solid transparent;
    border-image: url(../img/stripes.png) 9 round;
}

Content with a border-image

What I want:

enter image description here

Is it possible to apply an opacity to the border-image only and not the content?

Solution

  • You can use pseudo-element to create border with border-image and then set opacity.

    div {
  position: relative;
  margin: 50px;
  font-size: 25px;
  padding: 10px 25px;
  display: inline-block;
}
div:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 5px solid transparent;
  border-image: url('http://www.circlek.org/Libraries/2013_branding_design_elements/graphic_CKI_horizontal_stripesblue_RGB.sflb.ashx') 22 22 repeat;
  transform: translate(-5px, -5px);
  opacity: 0.4;
}
    <div>Element</div>
<div>Element <br> lorem</div>