Apply CSS border-image to a box

Elements
1

Hi to all,
I've been trying to style a box border using CSS.
My CSS code work on a html editor, I tried to use it with Hype but it doesn't work.

Here is the html code

.sheet-exhaustion4 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: fit-content;
margin-top: 10px;
border: 5px solid black;
border-image-source: url(./Cadre11.svg) ;
border-image-slice:33% ;
border-image-width:8;
border-image-outset:0px 0px 0px 0px;
border-image-repeat: repeat ;
padding: 1px 12px 1px 12px;
font-family: 'Averia Serif Libre', cursive;
}

That works perfectly well.

But no way to make it work in Hype (I changed the url to ${resourcesFolderName}/Cadre11.svg)

Here is my Hype project :
BorderImage.hype.zip (46.2 KB)

2

Hi kerguelen!

You need to put !important in with your styling in the head for each line . e.g.

border: 5px !important;

2 Likes
3

Thank you Jim !
It works !
It was all about forcing the use of this new CSS and override default settings ?

4

Yes... a greater style specificity using !important (i.e. the "cascade" part of cascading style sheets).

1 Like
5

Can you provide a "border gradient" for tumult hype? thanks alot
ζˆͺεœ– 2022-09-17 上午11.06.40

2 Likes
6

Thanks for the request - I've added your feedback as a +1 to our tracker for this.

You should be able to follow the tips in the above posts to add border gradients; the main thing you'll need is to add !important to your CSS.

2 Likes