Revisiting CSS border-image

In my final article on “Revisiting CSS Multi-Column Format”, I discussed that just about twenty years have flown by since I wrote my first e book, Transcending CSS. In it, I defined how and why to make use of what have been, on the time, an rising CSS property.

Ten years later, I wrote the Hardboiled Net Design Fifth Anniversary Version, protecting related floor and introducing the brand new CSS border-image property.

Trace: I revealed an up to date model, Transcending CSS Revisited which is free to learn on-line. Hardboiled Net Design is accessible from my bookshop.

I used to be very excited in regards to the potentialities this new property would provide. In any case, we may now add pictures to the borders of any aspect, even desk cells and rows (except their borders had been set to break down).

Since then, I’ve used border-image recurrently. But, it stays one of the vital underused CSS instruments, and I can’t, for the lifetime of me, determine why. Is it attainable that folks keep away from border-image as a result of its syntax is awkward and unintuitive? Maybe it’s as a result of most explanations don’t remedy the kind of artistic implementation issues that most individuals want to resolve. Probably, it’s each.

I’ve just lately been engaged on a brand new web site for Emmy-award-winning sport composer Mike Price. He employed me to create a extremely graphical design that showcases his work, and I used border-image all through.

A short overview of properties and values

First, right here’s a brief refresher. Most border-image explanations start with this extremely illuminating code snippet:

border-image: [source] [slice]/[width]/[outset] [repeat]

That is shorthand for a set of border-image properties, however it’s greatest to take care of properties individually to understand the idea extra simply.

A border-image’s supply

I’ll begin with the supply of the bitmap or vector format picture or CSS gradient to be inserted into the border house:

border-image-source: url('/img/scroll.png');

After I insert SVG pictures right into a border, I’ve a number of decisions as to how. I may use an exterior SVG file:

border-image-source: url('/img/scroll.svg');

Or I’d convert my SVG to knowledge URI utilizing a device like Base64.Guru though, as each SVG and HTML are XML-based, this isn’t advisable:

border-image-source: url('knowledge:picture/svg+xml;base64,…');

As a substitute, I can add the SVG code instantly into the supply URL worth and save one pointless HTTP request:

border-image-source: url('knowledge:picture/svg+xml;utf8,…');

Lastly, I may insert a completely CSS-generated conical, linear, or radial gradient into my border:

border-image-source: conical-gradient(…);

Tip: It’s helpful to keep in mind that a browser renders a border-image above a component’s background and box-shadow however beneath its content material. Extra on that slightly later.

Slicing up a border-image

Now that I’ve specified the supply of a border picture, I can apply it to a border by slicing it up and utilizing the components in several positions round a component. This may be essentially the most baffling side for individuals new to border-image.

Most border-image explanations present an instance the place the items will merely be equally-sized, like this:

Nevertheless, a border-image might be developed from any form, regardless of how advanced or irregular.

As a substitute of merely inserting a picture right into a border and watching it repeat round a component, invisible cut-lines slice up a border-image into 9 components. These strains are just like the slice guides present in graphics purposes. The items are, in flip, inserted into the 9 areas of a component’s border.

The border-image-slice property defines the scale of every slice by specifying the gap from every fringe of the picture. I may use the identical distance from each edge:

border-image-slice: 65

I can mix high/backside and left/proper values:

border-image-slice: 115 65;

Or, I can specify distance values for all 4 cut-lines, working clockwise: high, proper, backside, left:

border-image-slice: 65 65 115 125;

The highest-left of a picture might be used on the top-left nook of a component’s border. The underside-right might be used on the bottom-right, and so forth.

I don’t want so as to add items to border-image-slice values when utilizing a bitmap picture because the browser accurately assumes bitmaps use pixels. The SVG viewBox makes utilizing them slightly totally different, so I additionally want to specify their peak and width:

<svg peak="600px" width="600px">…</svg>

Don’t neglect to set the widths of those borders, as with out them, there might be nowhere for a border’s picture to show:

border-image-width: 65px 65px 115px 125px;

Filling within the heart

Up to now, I’ve used all 4 corners and sides of my picture, however what in regards to the heart? By default, the browser will ignore the middle of a picture after it’s been sliced. However I can put it to make use of by including the fill key phrase to my border-image-slice worth:

border-image-slice: 65px 65px 115px 125px fill;

Organising repeats

With the corners of my border pictures in place, I can flip my consideration to the sides between them. As you may think, the slice on the high of a picture might be positioned on the highest edge. The identical is true of the precise, backside, and left edges. In a versatile design, we by no means know the way extensive or tall these edges might be, so I can fine-tune how pictures will repeat or stretch once they fill an edge.

Stretch: When a sliced picture is flat or easy, it could actually stretch to fill any peak or width. Even a tiny 65px slice can stretch to lots of or 1000’s of pixels with out degrading.

border-image-repeat: stretch;

Repeat: If a picture has texture, stretching it isn’t an choice, so it could actually repeat to fill any peak or width.

border-image-repeat: repeat;

Spherical: If a picture has a sample or form that may’t be stretched and I must match the sides of the repeat, I can specify that the repeat be spherical. A browser will resize the picture in order that solely complete items show inside an edge.

border-image-repeat: spherical;

Area: Much like spherical, when utilizing the house property, solely complete items will show inside an edge. However as a substitute of resizing the picture, a browser will add areas into the repeat.

border-image-repeat: house;

After I must specify a separate stretch, repeat, spherical, or house worth for every edge, I can use a number of key phrases:

border-image-repeat: stretch spherical;

Outsetting a border-image

There might be instances once I want a picture to increase past a component’s border-box. Utilizing the border-image-outset property, I can do exactly that. The best syntax extends the border picture evenly on all sides by 10px:

border-image-outset: 10px;

After all, there being 4 borders on each aspect, I may additionally specify every outset individually:

border-image-outset: 20px 10px; 
/* or */
border-image-outset: 20px 10px 0;

border-image in motion

Mike Price is a online game composer who’s received an Emmy for his work. He loves ’90s animation — particularly Disney’s Duck Tales — and he requested me to create customized art work and develop a daring, retro-style design.

My problem when creating for Mike was implementing my extremely graphical design with out compromising efficiency, particularly on cell gadgets. Whereas it’s regular in CSS to perform the identical objective in a number of methods, right here, border-image usually proved to be essentially the most environment friendly.

Ornamental buttons

The best and most blatant place to begin was creating buttons paying homage to stone tablets with chipped and uneven edges.

I created an SVG of the pill form and added it to my buttons utilizing border-image:

button {
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('knowledge:picture/svg+xml;utf8,…');
  border-image-width: 20px;
}

I set the border-image-repeat on all edges to stretch and the middle slice to fill so these stone tablet-style buttons broaden together with their content material to any peak or width.

Article scroll

I need each side of Mike’s web site design to specific his model. Which means persevering with the ’90s cartoon theme in his long-form content material by turning it right into a paper scroll.

The markup is simple with only a single article aspect:

<article>
  <!-- ... -->
</article>

However, I struggled to determine the way to implement the paper impact. My first thought was to divide my scroll into three separate SVG information (high, center, and backside) and use pseudo-elements so as to add the rolled up high and backside components of the scroll. I began by making use of a vertically repeating graphic to the center of my article:

article {
  padding: 10rem 8rem;
  box-sizing: border-box;
  /* Scroll center */
  background-image: url('knowledge:picture/svg+xml;utf8,…');
  background-position: heart;
  background-repeat: repeat-y;
  background-size: include;
}

Then, I added two pseudo-elements, every containing its personal SVG content material:

article:earlier than {
  show: block;
  place: relative;
  high: -30px;
  /* Scroll high */
  content material: url('knowledge:picture/svg+xml;utf8,…');
}

article:after {
  show: block;
  place: relative;
  high: 50px;
  /* Scroll backside */
  content material: url('knowledge:picture/svg+xml;utf8,…');
}

Whereas this implementation labored as anticipated, utilizing two pseudo-elements and three separate SVG information felt clumsy. Nevertheless, utilizing border-image, one SVG, and no pseudo-elements feels extra elegant and considerably reduces the quantity of code wanted to implement the impact.

I began by creating an SVG of the entire pill form:

And I labored out the place of the 4 cut-lines:

Then, I inserted this single SVG into my article’s border by first choosing the supply, slicing the picture, and setting the highest and backside edges to stretch and the left and proper edges to spherical:

article {
  border-image-slice: 150 95 150 95 fill;
  border-image-width: 150px 95px 150px 95px;
  border-image-repeat: stretch spherical;
  border-image-source: url('knowledge:picture/svg+xml;utf8,…');
}

The outcome is a versatile paper scroll impact which adapts to each the viewport width and any quantity or kind of content material.

Dwelling web page overlay

My closing problem was implementing the action-packed graphic I’d designed for Mike Price’s house web page. This comprises a foreground SVG that includes Mike’s orangutan mascot and a zooming background graphic:

<part>
  <!-- content material -->
  <div>...</div>

  <!-- ape -->
  <div>
    <svg>…</svg>
  </div>
</part>

I outlined the part as a positioning context for its youngsters:

part {
  place: relative;
}

Then, I completely positioned a pseudo-element and added the zooming graphic to its background:

part:earlier than {
  content material: "";
  place: absolute;
  z-index: -1;
  background-image: url('knowledge:picture/svg+xml;utf8,…');
  background-position: heart heart;
  background-repeat: no-repeat;
  background-size: 100%;
}

I needed this graphic to spin and add refined motion to the panel, so I utilized a easy CSS animation to the pseudo-element:

@keyframes spin-bg {
  from { remodel: rotate(0deg); }
  to { remodel: rotate(360deg); }
}

part:earlier than {
  animation: spin-bg 240s linear infinite;
}

Subsequent, I added a CSS masks to fade the sides of the zooming graphic into the background. The CSS mask-image property specifies a masks layer picture, which could be a PNG picture, an SVG picture or masks, or a CSS gradient:

part:earlier than {
  mask-image: radial-gradient(circle, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 60%);
  mask-repeat: no-repeat;
}

At this level, you may marvel the place a border picture might be used on this design. So as to add extra interactivity to the graphic, I needed to scale back its opacity and alter its coloration — by including a coloured gradient overlay — when somebody interacts with it. One of many easiest, however rarely-used, strategies for making use of an overlay to a component is utilizing border-image. First, I added a default opacity and added a quick transition:

part:earlier than {
  opacity: 1;
  transition: opacity .25s ease-in-out;
}

Then, on hover, I decreased the opacity to .5 and added a border-image:

part:hover::earlier than {
  opacity: .5;
  border-image: fill 0 linear-gradient(rgba(0,0,255,.25),rgba(255,0,0,1));
}

You could ponder why I’ve not used the opposite border-image values I defined earlier, so I’ll dissect that declaration. First is the border-image-slice worth, the place zero pixels ensures that the eight corners and edges keep empty. The fill key phrase ensures the center part is crammed with the linear gradient. Second, the border-image-source is a CSS linear gradient that blends blue into pink. A browser renders this border-image above the background however behind the content material.

Conclusion: It is best to take a recent have a look at border-image

The border-image property is a robust, but usually ignored, CSS device that gives unbelievable flexibility. By slicing, repeating, and outsetting pictures, you may create intricate borders, ornamental components, and even dynamic overlays with minimal code.

In my work for Mike Price’s web site, border-image proved invaluable, enhancing efficiency whereas sustaining a extremely graphical aesthetic. Whether or not used for buttons, interactive overlays, or bigger graphic components, border-image can create visually placing designs with out counting on additional markup or a number of belongings.

In the event you’ve but to experiment with border-image, now’s the time to revisit its potential and add it to your design toolkit.

Trace: Mike Price’s web site will launch in April 2025, however you may see examples from this text on CodePen.

About Andy Clarke

Also known as one of many pioneers of net design, Andy Clarke has been instrumental in pushing the boundaries of net design and is understood for his artistic and visually beautiful designs. His work has impressed numerous designers to discover the complete potential of product and web site design.

Andy’s written a number of industry-leading books, together with Transcending CSS, Hardboiled Net Design, and Artwork Route for the Net. He’s additionally labored with companies of all sizes and industries to realize their targets via design.

Go to Andy’s studio, Stuff & Nonsense, and take a look at his Contract Killer, the favored net design contract template trusted by 1000’s of net designers and builders.

---

Revisiting CSS border-image initially revealed on CSS-Methods, which is a part of the DigitalOcean household. It is best to get the e-newsletter.