In my final article on “Revisiting CSS Multi-Column Structure”, I discussed that nearly 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 comparable floor and introducing the brand new CSS border-image property.
Trace: I printed an up to date model, Transcending CSS Revisited which is free to learn on-line. Hardboiled Net Design is on the market from my bookshop.
I used to be very excited concerning the prospects this new property would supply. In any case, we might now add photographs to the borders of any aspect, even desk cells and rows (until their borders had been set to break down).
Since then, I’ve used border-image repeatedly. But, it stays probably the most underused CSS instruments, and I can’t, for the lifetime of me, work out why. Is it doable 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 resolve the kind of artistic implementation issues that most individuals want to resolve. More than likely, it’s each.
I’ve just lately been engaged on a brand new web site for Emmy-award-winning recreation composer Mike Value. He employed me to create a extremely graphical design that showcases his work, and I used border-image all through.
A quick 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 finest 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 area:
border-image-source: url('/img/scroll.png');Once I insert SVG photographs right into a border, I’ve a number of decisions as to how. I might use an exterior SVG file:
border-image-source: url('/img/scroll.svg');Or I’d convert my SVG to information URI utilizing a device like Base64.Guru though, as each SVG and HTML are XML-based, this isn’t beneficial:
border-image-source: url('information: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('information:picture/svg+xml;utf8,…');Lastly, I might insert a wholly 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 under its content material. Extra on that a bit of 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 elements in numerous 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 complicated 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 elements. These strains are much 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 space from every fringe of the picture. I might use the identical distance from each edge:
border-image-slice: 65I 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 will probably be used on the top-left nook of a component’s border. The underside-right will probably be used on the bottom-right, and so forth.
I don’t want so as to add models to border-image-slice values when utilizing a bitmap picture because the browser appropriately assumes bitmaps use pixels. The SVG viewBox makes utilizing them a bit of completely different, so I additionally want to specify their top and width:
<svg top="600px" width="600px">…</svg>Don’t overlook to set the widths of those borders, as with out them, there will probably be nowhere for a border’s picture to show:
border-image-width: 65px 65px 115px 125px;Filling within the heart
To date, I’ve used all 4 corners and sides of my picture, however what concerning 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 photographs in place, I can flip my consideration to the perimeters between them. As you may think, the slice on the high of a picture will probably be positioned on the highest edge. The identical is true of the best, backside, and left edges. In a versatile design, we by no means know the way large or tall these edges will probably be, so I can fine-tune how photographs will repeat or stretch once they fill an edge.
Stretch: When a sliced picture is flat or easy, it may well stretch to fill any top or width. Even a tiny 65px slice can stretch to tons of or 1000’s of pixels with out degrading.
border-image-repeat: stretch;Repeat: If a picture has texture, stretching it isn’t an possibility, so it may well repeat to fill any top or width.
border-image-repeat: repeat;Spherical: If a picture has a sample or form that may’t be stretched and I have to match the perimeters 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 area 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: area;Once I have to specify a separate stretch, repeat, spherical, or area 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 after I want a picture to increase past a component’s border-box. Utilizing the border-image-outset property, I can just do that. The only syntax extends the border picture evenly on all sides by 10px:
border-image-outset: 10px;In fact, there being 4 borders on each aspect, I might additionally specify every outset individually:
border-image-outset: 20px 10px;
/* or */
border-image-outset: 20px 10px 0;border-image in motion
Mike Value 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 paintings and develop a daring, retro-style design.
My problem when growing for Mike was implementing my extremely graphical design with out compromising efficiency, particularly on cellular units. Whereas it’s regular in CSS to perform the identical aim 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 start out was creating buttons harking back 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('information: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 develop together with their content material to any top or width.
Article scroll
I would like each side of Mike’s web site design to precise his model. Meaning 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 resolve the right 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 elements 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('information: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('information:picture/svg+xml;utf8,…');
}
article:after {
show: block;
place: relative;
high: 50px;
/* Scroll backside */
content material: url('information: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 whole 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('information:picture/svg+xml;utf8,…');
}The consequence is a versatile paper scroll impact which adapts to each the viewport width and any quantity or kind of content material.
House web page overlay
My ultimate problem was implementing the action-packed graphic I’d designed for Mike Value’s dwelling web page. This incorporates 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('information: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 { rework: rotate(0deg); }
to { rework: rotate(360deg); }
}
part:earlier than {
animation: spin-bg 240s linear infinite;
}Subsequent, I added a CSS masks to fade the perimeters of the zooming graphic into the background. The CSS mask-image property specifies a masks layer picture, which generally is 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 would possibly marvel the place a border picture may very well be used on this design. So as to add extra interactivity to the graphic, I needed to cut 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 lowered 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));
}It’s possible you’ll 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’s best to take a recent take a look at border-image
The border-image property is a robust, but usually missed, CSS device that gives unbelievable flexibility. By slicing, repeating, and outsetting photographs, you possibly can create intricate borders, ornamental parts, and even dynamic overlays with minimal code.
In my work for Mike Value’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 parts, border-image can create visually hanging designs with out counting on additional markup or a number of property.
In case 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 Value’s web site will launch in April 2025, however you possibly can see examples from this text on CodePen.
About Andy Clarke
Sometimes called one of many pioneers of internet design, Andy Clarke has been instrumental in pushing the boundaries of internet design and is understood for his artistic and visually beautiful designs. His work has impressed numerous designers to discover the total 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 attain their objectives by design.
Go to Andy’s studio, Stuff & Nonsense, and take a look at his Contract Killer, the favored internet design contract template trusted by 1000’s of internet designers and builders.
