The Complicated However Superior CSS border-image Property — Smashing Journal

The border-image property is nothing new. Even deprecated Web Explorer helps it, so you already know we’re treading well-charted territory. On the similar time, it’s not precisely a type of properties you possible preserve shut at hand, and its complicated ideas of “slicing” and “outsets” don’t make it the best property to make use of.

I’m right here to inform you that border-image is just not solely able to producing some extremely eye-catching UI designs however can also be in a position to accomplish another frequent patterns we regularly flip to different properties and approaches for.

On this article, my plan is to dispel the complicated points of border-image with out getting right into a bunch of theoretical explanations and technical jargon. As a substitute, we’re going to have enjoyable with the property, utilizing it to create shapes and put a distinct spin on issues like vary sliders, tooltips, and title decorations.

By the tip of this, I hope that border-image turns into your new favourite property simply because it has change into mine!

The Idea of Picture Borders

There are a couple of particular points of border-image that I believe are essential for understanding the way it works.

It’s Simple To Unintentionally Override A Border Picture

The CSS Backgrounds and Border Module Degree 3 specification says border-image ought to substitute any common border you outline, nevertheless it’s not all the time the case. Attempt the code beneath, and all you will note is a purple border.

/* All I see is a purple border */
.aspect {
  border-image: linear-gradient(blue, purple) 1;
  border: 5px stable purple;
}

That’s as a result of we’re technically declaring border after border-image. Order actually does matter when working with border-image!

/* 👍 */
.aspect {
  border: 5px stable purple;
  border-image: linear-gradient(blue, purple) 1;
}

You’ll be able to already see how this might be complicated for anybody leaping into border-image, particularly for the primary time. Additionally, you will discover that our gradient border has a thickness equal to 5px, which is the border-width we outlined.

I make it a private behavior to not use border and border-image collectively as a result of it helps me keep away from overriding the border picture I’m attempting to create and have the ability to management the border ornament utilizing just one property (even when each can be utilized collectively). So, should you get a wierd consequence, don’t overlook to test when you have a border declared someplace.

It Is Painted Over Backgrounds And Field Shadows

The second tip I wish to supply is that border-image is painted above the aspect’s background and box-shadow however beneath the aspect’s content material. This element is necessary for a number of the tips we’ll use in later examples. The next Pen demonstrates how a border picture is utilized in that order:

It Has A Complicated Syntax

I wish to underscore this as a result of I believe it’s the explanation for the overwhelming majority of confusion. That is the property’s syntax:

border-image: <supply> <slice>/<width>/<outset> <repeat>

On this article, the<supply> will include gradients, though it helps picture sources as effectively. And we’re not going to make use of <repeat> rather a lot. Let’s re-write the syntax eradicating the <repeat> and setting a placeholder, *-gradient(), because the supply in the meanwhile:

border-image: *-gradient() <slice>/<width>/<outset>

We’ve abstracted a few the parameters so that each one we’re left with is <slice>, <width>, and <outset>.

The <width> and <outset> work the identical as setting border-width, padding, and margin. They every take between one and 4 values relying on whether or not you need particular <outset> and <width> values set individually on the aspect’s edges. Typically, I solely must specify the outset, making the width pointless. So, chances are you’ll discover me writing one thing like this:

border-image: *-gradient() <slice>//<outset>

It’s in all probability the one property the place we are able to have a double slash!

The <slice> additionally takes between one and 4 values (both unitless or share) in addition to an non-compulsory fill key phrase. That is what makes border-image obscure as a result of it’s not straightforward to visualise the idea of slices.

If we had been to translate the determine above into code utilizing the offered variables as values, it could appear like this:

border-image:
  linear-gradient(...)
  s-top s-right s-bottom s-left / 
  w-top w-right w-bottom w-left /
  o-top o-right o-bottom o-left;

By default, border-image considers the boundaries of the aspect (illustrated with the blue dotted border in Determine 1) as its space to color the gradient, however we are able to change this utilizing the <outset> to extend that space and create an overflow. That is tremendous helpful to have “outdoors” decorations.

Then, the <width> is used to separate the realm into 9 areas, and the <slice> is used to separate the supply (i.e., the gradient) into 9 slices as effectively. From there, we assign every slice to its corresponding area. Every slice is stretched to fill its assigned area, and in the event that they don’t share equal dimensions, the result’s sometimes a distorted picture slice. Afterward, we’ll discover ways to management that and forestall distortion.

The center area is stored empty by default. That mentioned, it’s completely potential to make use of the fill key phrase to do what it says and fill the center area with slice 9 (which is all the time the middle slice).

border-image: linear-gradient(...) fill
  s-top s-right s-bottom s-left / 
  w-top w-right w-bottom w-left /
  o-top o-right o-bottom o-left;

I do know this was a fairly quick primer on border-image, however I believe it’s all we have to do some fairly superior stuff. Let’s soar into the enjoyable and begin experimenting with results.

Gradient Overlay

Our first experiment is so as to add a gradient overlay above an current background. It is a pretty frequent sample to enhance the legibility of textual content by rising the distinction between the textual content coloration and the background coloration.

There are a number of well-known approaches to setting an overlay between textual content and content material. Right here’s one from Chris Coyier again in 2013. And that isn’t even probably the most widely-used strategy, which is probably going utilizing pseudo-elements.

However border-image offers us a one-line approach to pull it off:

.overlay {
  border-image: fill 0 linear-gradient(#0003,#000); 
}

That’s all! No further aspect, no pseudo-element, and no want to switch the background property.

If we dissect the property, we’ve the <supply> (i.e., the gradient) and the <slice> (i.e., fill 0). We didn’t outline both the <width> or the <outset>, in order that they default to 0.

Let’s take that very same concept and apply it to the determine we introduced earlier when demonstrating the idea of slicing. We’ll substitute the variables we used as placeholders with the values from the final instance we simply checked out.

We now have a slice that is the same as 0, so the slices — 1 by means of 8 — shall be empty whereas the center slice is stuffed with the entire gradient. It’s like we’ve just one slice. The <width> is the same as 0, so areas 1 to eight are sized to 0, leaving the center area to what’s left (the entire border-image’s space). And since we didn’t specify an <outset>, the border-image’s space is the same as the aspect’s space.

In the long run, we’ve one slice positioned within the center area and eight others we don’t see in any respect. That’s how we find yourself having our gradient above the aspect’s background and behind the textual content.

Let’s strive a distinct syntax however that produces the identical output as what we simply did.

.overlay {
  border-image: linear-gradient(#0003, #000) 50%/50%; 
}

This time, we’re defining a <slice> that is the same as 50%, a <width> that can also be equal to 50%, and no <outset>. Slices 1 to 4 every take up one-quarter of the gradient. Slices 5 to 9, in the meantime, are empty. Utilizing the identical logic for the areas, we’ve 4 areas — 1 to 4 — that every takes up 1 / 4 of the aspect’s space whereas the remainder of the areas are equal to 0.

Within the first strategy, we positioned one slice in the midst of the aspect. On this strategy, we’ve 4 slices, the place every is positioned in a nook of the aspect and allowed to fill your entire aspect.

It’s the identical output however a distinct strategy utilizing the identical property.

If the slicing idea is tripping you up, we nonetheless have loads of different examples we’re going to have a look at that will help you perceive it. The trick is to first perceive how the gradient is split into completely different slices, then how these slices are positioned into completely different areas, that are sized by the <width> and the <outset>. It could take time to know the mechanism, nevertheless it’s quite a lot of enjoyable when you do! So, let’s proceed to the following instance.

Full-Width Backgrounds

Our subsequent instance is a standard design sample the place we would like the background of a component to increase to the display’s full width. We frequently check with this as a “break-out” background as a result of the aspect sometimes wants to interrupt outdoors the constrained width of its mother or father container to be able to stretch throughout the total display.

Effectively, guess what? The border-image property can pull it off with one line of code:

.full-background {
  border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}

You’re in all probability questioning what’s happening with that conic-gradient(), proper? I need a stable coloration, however not like the background and background-color properties, border-image doesn’t assist coloration values, so I exploit a gradient that produces a stable coloration. For this, I outline one coloration with two coloration stops contained in the gradient.

The kind of gradient or what coloration stops are utilized to it doesn’t matter. I desire conic-gradient() and two zeros as a result of it merely gives the smallest syntax to get a stable coloration in consequence.

Now, let’s dissect that line of code. We now have a <slice> that is the same as 0, no <width> (it’s implicitly equal to 0), and this time the <outset> is the same as 0 100vw which will increase the border-image’s space from the left and proper aspect by 100% of the viewport’s width (100vw).

We may technically use a worth smaller than 100vw for the reason that area we have to cowl will almost definitely be smaller, however utilizing a bigger worth is all the time good to verify we think about all the chances. And border-image doesn’t set off scrolling, so don’t fear about utilizing huge values!

When you evaluate what we simply did with the gradient overlay instance, the <outset> is the one distinction between the implementations. Apart from that, we’ve a single slice positioned within the center area that covers your entire space we prolonged to the sting of the display.

We’re not restricted to a stable coloration, after all, since we’re working with gradients.

We are able to even get just a little fancy by slanting the backgrounds to provide an attention-grabbing web page design.

The “tough” half is that I’ve mixed border-image with clip-path:

.slant {
  --a: 3deg; /* management the angle (it must be small) */
  
  border-image: conic-gradient(pink 0 0) fill 0//9999px;
  clip-path: 
    polygon(
      -9999px calc(tan(var(--a)) * 9999px),
      9999px calc(tan(var(--a)) * -9999px),
      calc(100% + 9999px) calc(100% - tan(var(--a)) * 9999px),
      calc(100% - 9999px) calc(100% + tan(var(--a)) * 9999px)
    );
}

This time, we’ve a reasonably giant <outset> extending in all instructions. This forces the colour to overflow the aspect’s boundaries, which permits us to achieve for the CSS clip-path property to chop out the form.

Fancy Headings

One other factor we are able to use border-image for is adorning headings with fancy borders. Let’s begin with the very same implementation we used for the full-width backgrounds. Solely this time, we’re changing the conic-gradient() with a linear-gradient():

.full-background {
  border-image: linear-gradient(0deg, #1095c1 5px, lightblue 0) fill 0//0 100vw;
}

Now we apply this to an <h1> aspect:

Nothing shocking right here. We’re mainly establishing a gradient with a pointy coloration cease that creates a border-like look alongside the underside fringe of the heading, extending the total width of the display. However what if we make one of many colours clear and outline a giant <outset> in just one route? This produces a backside border that extends to the sting of the display in a single route reasonably than each instructions.

That’s a easy sample, nevertheless it might be a pleasant design accent. Nonetheless utilizing one line of code:

.full-line {
  border-image: linear-gradient(0deg, #1095c1 5px, #0000 0) fill 0//0 100vw 0 0;
}

We are able to really accomplish this one other manner:

.full-line {
  border-image: conic-gradient(#1095c1 0 0) fill 0/calc(100% - 8px) 0 0 0/0 100vw 0 0;
}

This defines the scale of the highest areas to be equal to 100% - 8px whereas the remainder of the areas are equal to 0. When you refer again to the primary determine, it means we’re making the peak of area 5 equal to 100% - 8px, so the center area could have solely 8px of peak, and for the reason that slice remains to be 0, we solely have the center slice positioned inside that 8px of area.

So, that’s two other ways to get the identical impact utilizing the identical border-image syntax. We are able to really get this a 3rd manner as effectively:

.full-line {
  border-image: conic-gradient(#1095c1 0 0) 0 0 1 0/0 0 8px 0/0 100vw 0 0;
}

This time, I’ve outlined a backside slice equal to 1 (unitless values are computed as pixels), which produces two slices, the seventh (backside middle) and the ninth (middle). From there, I’ve set the seventh area to a peak of 8px. Notice that I’m not utilizing the fill key phrase this time, so the center area is just not crammed prefer it was final time. As a substitute, we solely fill the seventh area that takes up 100% of the boder-image’s space and 8px of its peak.

You’re questioning why I’m defining a slice equal to 1, proper? The purpose is to have solely two slices: the seventh (backside middle) and the ninth (center), and since we’re making use of a stable coloration, the scale doesn’t matter. That’s why I used 1; a small constructive worth. Any worth will work (e.g., 0.5, 2, 100, 50%, 76%, and so forth); it’s simply that 1 is shorter to kind. Keep in mind that the slice will get stretched inside its area, so 1px is sufficient to fill the entire area.

Right here’s the deal: The slice worth doesn’t actually matter when working with a stable coloration. Normally, the worth winds up being 0 (empty) or 1 (crammed). You’ll be able to consider it as binary logic.

We may do that a fourth manner!

.full-line {
  border-image: conic-gradient(#1095c1 0 0) 0 1 0 0/calc(100% - 8px) 100% 0 0/0 100vw 0 0;
}

I’ll allow you to do the work to determine how the above CSS works. It’s a great alternative to get a really feel for slicing parts. Take a pen and paper and attempt to establish which slices we’re utilizing and which areas shall be crammed.

One factor that makes border-image a fancy property is all of the other ways to attain the identical consequence. You’ll be able to wind up with quite a lot of completely different mixtures, and when all of them produce the identical consequence, it’s powerful to kind a psychological mannequin for understanding how all the values work collectively.

Despite the fact that there is no such thing as a single “proper” approach to do these heading borders, I desire the second syntax as a result of it permits me to easily change one coloration worth to determine a “actual” gradient as a substitute of a stable coloration.

.full-line {
  border-image: repeating-linear-gradient(...) fill 0 /
    calc(100% - var(--b)) 0 0/0 100vw 0 0 repeat;
}

Discover the repeat key phrase in that final instance. I talked earlier about how a slice might be set to a dimension that’s completely different than its corresponding area, and that might result in a distorted border picture. This isn’t a problem when coping with a stable coloration. Utilizing an actual gradient, nonetheless, is the place distortion would possibly happen. Luckily, the repair most often is to set repeat on the finish of the border-image declaration (stretch is the default worth).

If repeat doesn’t appear to work, then it’s potential there is a matter some other place within the code… or maybe you have got reached the restrict of what border-image can do. It’s a strong property, however like some other, it has its limitations.

Heading Dividers

Since we had been simply making backside borders for headings within the final instance, I determine we are able to do a variant of that by drawing the border by means of the heading.

This could be a good approach to emphasize a heading, particularly these in an article physique. Right here is the pertinent code:

h2 {
  --s: 3px;   /* the thickness */
  --c: purple;   /* the colour */
  --w: 100px; /* the width */
  --g: 10px;  /* the hole */

  border-image: 
    linear-gradient(
      #0000      calc(50% - var(--s)/2),
      var(--c) 0 calc(50% + var(--s)/2),
      #0000 0) 
    0 1 / 0 var(--w) / 0 calc(var(--w) + var(--g));
}

This instance is placing CSS variables to make use of so we’ve some flexibility to re-configure the border picture and create variations of the sample. However earlier than studying the reason of how this works, please take a second to visualise the consequence utilizing what you have got discovered to this point. Attempt to establish the slices, the areas, and their dimensions.

Prepared? Right here’s the way it works.

We now have a slice equal to 0 1 — 1px every from the left and proper. This establishes slices eight (center-right) and 6(center-left) with a width of 1px whereas the remaining area is reserved for the ninth (middle) slice. We’re not utilizing fill, so we don’t actually care concerning the ninth slice because it gained’t get painted.

The width (--w) is used to set the scale of areas six and eight. We’d like the identical quantity contained in the <outset> to verify these two areas are outdoors of the aspect’s boundaries. One other variable, --g, is added to the outset method to regulate the hole between the textual content and the ornament.

The gradient is much like the one we used for the underside heading borders within the final part. Solely this time, the colour is within the middle as a substitute of the underside, and its dimension is managed utilizing the --s variable.

Let’s strive one other syntax for a similar impact:

h2 {
  --s: 3px;   /* the thickness */
  --w: 100px; /* the width */
  --g: 10px;  /* the hole */
  border-image: 
     conic-gradient(purple 0 0) 
     0 50%/calc(50% - var(--s)/2) var(--w)/0 calc(var(--w) + var(--g));
}

The highest and backside values of the <slice> are equal to 0, and the left and proper ones are equal to 50%. Which means slices six and eight share the gradient. All the opposite slices — together with the middle — are empty.

So far as the areas go, the highest and backside areas (consisting of areas 1, 5, and a couple of on the high and areas 4, 7, and three on the backside) have a peak equal to 50% - var(--s)/2 leaving the --s variable as a peak for the remaining areas (6, 8, and 9). The best and the left areas have a width equal to the --w variable. Since slices 6 and eight are the one ones which are crammed, the one areas we have to care about are 6 and eight. Each have a peak equal to the border’s thickness, --s, and a width equal to --w.

I believe you understand how the remainder of the story goes.

Discover I’m utilizing 50% as a slice. It demonstrated how any worth does the job, as we mentioned within the final part once I defined why I selected to make use of a worth of 1 but additionally to organize for the following impact the place I shall be utilizing an actual gradient:

On the subject of actual gradients, the worth of the slice is necessary, and typically you want very exact values. To be trustworthy, this may be very tough, and I even get misplaced attempting to determine the correct worth.

Let’s finish this part with extra examples of title decorations. When mixed with different properties, border-image could make very nice results.

Extra Examples

Now that we’ve seen a number of detailed examples of how border-image, I’m going to drop in a number of different examples. Fairly than explaining them in nice element, attempt to clarify them in your personal phrases by inspecting the CSS, and use these as inspiration in your personal work.

Infinite Picture Decorations

On the subject of pictures, border-image could be a lifesaver since we don’t have entry to pseudo-elements. Listed below are some cool infinite decorations the place we are able to have a contact of 3D impact.

When you test the code in these examples, one can find they share almost the identical construction. You probably have hassle recognizing the sample, please don’t hesitate to go away a remark on the finish of this text, and I might be pleased to level it out.

Customized Vary Slider

I wrote an in depth article on easy methods to create the next instance, and you’ll check with it for vary slider variations utilizing the identical approach.

I used border-image and styled solely the “thumb” aspect. Vary inputs are recognized to have completely different implementation cross-browser, however the “thumb” is frequent between all of them.

Ribbon Shapes

In case you missed it, I’ve created a group of greater than 100 single-element ribbon shapes, and a few of them depend on border-image. I name them the “infinite ribbons.”

Coronary heart Shapes

I’ve written about CSS coronary heart shapes utilizing completely different approaches, and certainly one of them makes use of a border-image approach.

.coronary heart {
  width: 200px;
  aspect-ratio: 1;
  border-image: radial-gradient(purple 69%,#0000 70%) 84.5%/50%;
  clip-path: polygon(-42% 0,50% 91%, 142% 0);
}

The attention-grabbing half right here is the slice that is the same as 84.5%. That could be a greater worth than 50%, so it could appear incorrect for the reason that complete exceeds 100%. Nevertheless it’s completely high quality as a result of slices are in a position to overlap each other!

When utilizing values greater than 50%, the nook slices (1, 2, 3, and 4) will share frequent components, however the different slices are thought of empty. Logically, when utilizing a slice equal to 100%, we’ll finish with 4 slices containing the total supply.

Right here is an instance for example the trick:

The slider will replace the slice from 0% to 100%. On the left, you possibly can see how the nook slices (1-4) develop. Between 0% and 50%, the result’s logical and intuitive. Larger than 50%, you begin having the overlap. When reaching 100%, you possibly can see the total circle repeated 4 occasions as a result of every slice incorporates the total gradient, due to the overlap.

It may be complicated and never straightforward to visualise, however overlaps might be actually helpful to create customized shapes and fancy decorations.

What about a easy tooltip form with solely two properties? Sure, it’s potential!

.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* peak*/

  border-image: conic-gradient(#CC333F 0 0) fill 0//var(--h);
  clip-path: 
    polygon(0 100%,0 0,100% 0,100% 100%,
      calc(50% + var(--b)/2) 100%,
      50% calc(100% + var(--h)),
      calc(50% - var(--b)/2) 100%);
}

Filling Border Radius

In contrast to most ornamental border properties (e.g., box-shadow, define, border, and so forth), border-image doesn’t respect border-radius. The aspect remains to be a field, even when we’ve rounded off the corners. Different properties will acknowledge the visible boundary established by border-radius, however border-image bleeds proper by means of it.

That might be a downside in some cases, I suppose, nevertheless it’s additionally one of many quirky issues about CSS that may be leveraged for different makes use of like creating pictures with interior radius:

Cool, proper? Just one line of code makes it occur:

img {
  --c: #A7DBD8;
  --s: 10px; /* the border thickness*/
  
  border-image: conic-gradient(var(--c) 0 0) fill 0 // var(--s);
}

We are able to even go away the middle empty to get a variation that merely borders your entire aspect:

Conclusion

Do you know border-image property was such a strong — and versatile — CSS property? Regardless of the problem it takes to grasp the syntax, there are methods to maintain the code clear and easy. Plus, there may be usually a couple of “proper” approach to get the identical consequence. It’s an advanced and strong CSS characteristic.

If the ideas of slicing and defining areas with border-image are nonetheless providing you with issues, don’t fear. That’s tremendous frequent. It took me quite a lot of time to completely perceive how border-image works and easy methods to use it with completely different approaches to the syntax. Give your self loads of time, too. It helps to re-read issues like this text greater than as soon as to let the ideas sink in.

Complexities apart, I hope that you’ll add border-image to your toolbox and create quite a lot of magic with it. We are able to do much more with border-image than what was demonstrated right here. I really experiment with this form of stuff often and share my work over at my CSS Tip web site. Contemplate subscribing (RSS) to maintain up with the enjoyable and peculiar issues I strive.

Particular due to @SelenIT2, who pushed me to discover this property and wrote a superb article on it.

(gg, yk)