Image border with opacity

Question

I have it:

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

What I want:

Can opacity be applied only to the border image , and not to the content?

Answer 1

You can use pseudo-element to create a border using 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> 

Answer 2

Something like that:

 .striped-border:after{ content:""; position:absolute; top:0; bottom:0; left:0; right:0; border:8px solid rgba(256,256,256, 0.5); }