Border image with opacity

Question

I have this:

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

What I want:

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

Add the border-image to a pseudo-element and use opacity – I haz kode Jul 13 '17 at 15:45 — I haz kode, Jul 13 '17 at 15:45
@Nenad's solution: https://jsfiddle.net/bu6xt7pc/1/ – Carlos Torres Jul 13 '17 at 20:37 — Carlos Torres, Jul 13 '17 at 20:37

Nenad Vracar · Accepted Answer · 2017-07-13T16:02:29.883

8

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>

edited Jul 13 '17 at 16:02

answered Jul 13 '17 at 15:56

Nenad Vracar

118,580
15
151
176

Follow-up question: When adding a form, with an input and button, they show but apparently disabled. Any idea to enable them? Thanks again! https://jsfiddle.net/bu6xt7pc/3/ – Carlos Torres Jul 13 '17 at 20:49

score 2 · Answer 2 · answered Jul 13 '17 at 15:45

2

What about something like it:

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

answered Jul 13 '17 at 15:45

Mohsen

309
3
15

1

rgba won't work. OP needs border-image and not just solid color. That being said... Pseudo-elements are the way to go. – I haz kode Jul 13 '17 at 15:49
Jacques Marais, try setting top, left, bottom, right to 8px. make sure that .striped-border:after is at the from of your element – Mohsen Jul 13 '17 at 15:55
@Mohsen tried setting to 8px but no luck https://jsfiddle.net/xd1s93hb/3/ – Carlos Torres Jul 13 '17 at 15:57
oh dear Carlos, set them to 8px not 8 – Mohsen Jul 13 '17 at 16:12

Border image with opacity

2 Answers2

Linked