How to make border-image work with border-radius ?
I'm currently working on an element that should look like the attached pic below. However, I'm encountering difficulties in applying the "border-radius" property along with the "border-image" property.
Here is the link to my CSS code:
https://codepen.io/hackett-lai/pen/XWyQYxZ
I would appreciate any advice or suggestions from anyone who can help me with this issue.
9 Replies
From: https://css-tricks.com/almanac/properties/b/border-image-source/, you can set a
background-image on the ::before pseudoelement & get a rounded image border: https://codepen.io/geoffgraham/pen/vYjweVoThx dys~ I've tried this way but given that my background gradient contain transparent and backdrop-filter: blur, with your suggestion I found that I will loose these 2 effect..
Thanks dys!!! I've spent some time on it last night and figured out I should use
-webkit-mask: and -webkit-mask-composite to create a mask for the pseudoelement's background!!!! I've made the update on codepen and this is very appreciate for your help!
https://codepen.io/hackett-lai/pen/XWyQYxZ
Awesome. I was thinking maybe you could block out what you wanted with a mask, but I didn't manage to figure out how to do it.
Congrats. 
congrats, this is a great solution! Would suggest adding
z-index: -1; and pointer-events: none; to your pseudo so that the text can still be selected.
@hackettlai would appreciate it if you would (or would allow me to) drop a link to the above codepen in the "why doesn't border-image work with border-radius" CSSWG issue here: https://github.com/w3c/csswg-drafts/issues/7550Hey bro, thanks for the suggestion of adding
pointer-events: none; I've added it on my codepen already 🙂
However, I'm not sure if this is because of the pseudo has been clipped already, i found there is no different with or without z-index: -1;.
https://codepen.io/hackett-lai/pen/XWyQYxZ?editors=1100
Haha, actually, I'm just a beginner in front-end coding. I've noticed your significant contributions to the GitHub topics and I'm certain that you can write better than me. 😊 Please feel free to utilize my codepen in any way that could be helpful to you. 😎
so it's probably a one or the other situation now that I think of it. The
z-index: -1; moves the pseudo element panel behind the text layer but in front of the background layer. In this case the pointer-events: none; isn't needed. If you want to leave the pseudo element panel in front of the text layer you can use the pointer-events: none; to let mouse events through the panel.I've noticed that applying
pointer-events: none; makes a difference. With this property, the cursor changes to a "text pointer" when hovering over the element, indicating that it can't be interacted with. When pointer-events: none; is removed, the cursor returns to the standard pointer, indicating that the element is interactive again.
