Revisiting CSS border-image

My previous article, "Revisiting CSS Multi-Column Layout," noted that nearly two decades have passed since my first book, Transcending CSS, was published. This book explored then-novel CSS properties and their applications. A decade later, Hardboiled Web Design Fifth Anniversary Edition built upon this, introducing the border-image property.

(Note: An updated, freely available online version, Transcending CSS Revisited, exists. Hardboiled Web Design is available from my bookshop.)

The border-image property's potential excited me. It enabled image integration into element borders, even within tables (unless border collapse was applied).

Despite regular use, border-image remains underutilized. Is its awkward syntax to blame? Perhaps insufficient explanations of practical creative implementations? Likely both.

Recent work on Emmy-winning game composer Mike Worth's website, a graphically rich project, showcased border-image extensively.

border-image Properties and Values: A Quick Refresher

Most explanations begin with this often-confusing shorthand:

<code>border-image: \[source\] [slice]/\[width]/[outset\] [repeat]</code>

However, understanding individual properties is simpler.

Image Source

First, define the image source (bitmap, vector, or CSS gradient):

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

For SVGs, several options exist: external files:

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

Data URIs (though less recommended due to SVG and HTML's XML nature):

<code>border-image-source: url('data:image/svg xml;base64,…');</code>

Directly embedding SVG code (avoiding extra HTTP requests):

<code>border-image-source: url('data:image/svg xml;utf8,…');</code>

Or, using CSS gradients:

<code>border-image-source: conical-gradient(…);</code>

(Tip: Remember: border-image renders above background and box-shadow, but below content.)

Slicing the Image

After specifying the source, slicing divides the image for placement in the border's nine regions. This is often confusing for newcomers.

While simple equal-sized slices are common, border-image handles complex shapes. Invisible cut-lines divide the image into nine parts, similar to slice guides in graphic editors.

border-image-slice defines slice sizes, specifying the distance from each edge. This can be a single value:

<code>border-image-slice: 65</code>

Combined top/bottom and left/right values:

<code>border-image-slice: 115 65;</code>

Or individual values (clockwise: top, right, bottom, left):

<code>border-image-slice: 65 65 115 125;</code>

The top-left image section goes to the top-left corner, and so on. Bitmap images assume pixel units; SVGs benefit from explicit height and width:

<code><svg height="600px" width="600px">…</svg></code>

Set border widths accordingly:

<code>border-image-width: 65px 65px 115px 125px;</code>

Center Filling

The center is typically ignored, but the fill keyword utilizes it:

<code>border-image-slice: 65px 65px 115px 125px fill;</code>

Repetition

Control how images repeat or stretch along edges:

• stretch: Stretches smoothly.
• repeat: Repeats textured images.
• round: Repeats whole pieces, resizing the image.
• space: Repeats whole pieces, adding spaces.

Individual edge settings are possible:

<code>border-image-repeat: stretch round;</code>

Outsetting

Extend the image beyond the border-box using border-image-outset:

<code>border-image-outset: 10px;</code>

Or specify individual outsets:

<code>border-image-outset: 20px 10px;</code>

border-image in Practice: Mike Worth's Website

Mike Worth's website, inspired by 90s animation, used border-image for efficiency and visual impact.

Decorative Buttons

Stone tablet-style buttons were created using SVGs and border-image:

<code>button {
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('data:image/svg xml;utf8,…');
  border-image-width: 20px;
}</code>

Article Scroll

A paper scroll effect was achieved using a single SVG and border-image, avoiding pseudo-elements:

<code>article {
  border-image-slice: 150 95 150 95 fill;
  border-image-width: 150px 95px 150px 95px;
  border-image-repeat: stretch round;
  border-image-source: url('data:image/svg xml;utf8,…');
}</code>

Home Page Overlay

An interactive overlay used border-image to add a colored gradient on hover:

<code>section:hover::before {
  opacity: .5;
  border-image: fill 0 linear-gradient(rgba(0,0,255,.25),rgba(255,0,0,1));
}</code>

Conclusion

border-image is a powerful tool for creating visually striking designs efficiently. Its potential should be explored more widely. Mike Worth's website demonstrates its capabilities for creating intricate borders, decorative elements, and dynamic overlays. Experiment with border-image to enhance your designs.

(Note: Mike Worth's website launches in April 2025; CodePen examples are available.)

About Andy Clarke

Andy Clarke is a pioneering web designer known for his creative and visually stunning work. He's authored several influential books, including Transcending CSS, Hardboiled Web Design, and Art Direction for the Web, and offers a popular web design contract template, Contract Killer.

The above is the detailed content of Revisiting CSS border-image. For more information, please follow other related articles on the PHP Chinese website!