In my final article on “Revisiting CSS Multi-Column Layout”, I discussed that just about twenty years have flown by since I wrote my first guide, Transcending CSS. In it, I defined how and why to make use of what had been, on the time, an rising CSS property.
Ten years later, I wrote the Hardboiled Web Design Fifth Anniversary Edition, 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 out there from my bookshop.
I used to be very excited in regards to the prospects this new property would provide. In spite of everything, we may now add photos to the borders of any ingredient, even desk cells and rows (until their borders had been set to break down).
Since then, I’ve used border-image frequently. But, it stays probably the most 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 resolve the kind of artistic implementation issues that most individuals want to resolve. Most definitely, it’s each.
I’ve just lately been engaged on a brand new web site for Emmy-award-winning recreation composer Mike Price. 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, nevertheless 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');After I insert SVG photos right into a border, I’ve a number of selections as to how. I may use an exterior SVG file:
border-image-source: url('/img/scroll.svg');Or I would convert my SVG to knowledge URI utilizing a device like Base64.Guru though, as each SVG and HTML are XML-based, this isn’t recommended:
border-image-source: url('knowledge:picture/svg+xml;base64,…');As a substitute, I can add the SVG code straight 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 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 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 elements in numerous positions round a component. This may be essentially the most baffling facet for folks 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 may 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 traces 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: 65I can mix prime/backside and left/proper values:
border-image-slice: 115 65;Or, I can specify distance values for all 4 cut-lines, operating clockwise: prime, proper, backside, left:
border-image-slice: 65 65 115 125;The highest-left of a picture can be used on the top-left nook of a component’s border. The underside-right can 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 appropriately assumes bitmaps use pixels. The SVG viewBox makes utilizing them slightly completely different, so I additionally favor to specify their peak and width:
<svg peak="600px" width="600px">…</svg>Don’t overlook to set the widths of those borders, as with out them, there can 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 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 photos in place, I can flip my consideration to the sides between them. As you may think, the slice on the prime of a picture can 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 understand how broad or tall these edges can be, so I can fine-tune how photos will repeat or stretch once they fill an edge.
Stretch: When a sliced picture is flat or clean, it could stretch to fill any peak or width. Even a tiny 65px slice can stretch to a whole lot 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 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;House: Just 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;After I must 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 may be instances after 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 ingredient, 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 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 cell gadgets. Whereas it’s regular in CSS to perform the identical purpose in a number of methods, right here, border-image typically 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 develop together with their content material to any peak or width.
Article scroll
I need each facet of Mike’s web site design to specific 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 easy with only a single article ingredient:
<article>
<!-- ... -->
</article>However, I struggled to resolve tips on how to implement the paper impact. My first thought was to divide my scroll into three separate SVG recordsdata (prime, center, and backside) and use pseudo-elements so as to add the rolled up prime 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('knowledge:picture/svg+xml;utf8,…');
background-position: heart;
background-repeat: repeat-y;
background-size: comprise;
}Then, I added two pseudo-elements, every containing its personal SVG content material:
article:earlier than {
show: block;
place: relative;
prime: -30px;
/* Scroll prime */
content material: url('knowledge:picture/svg+xml;utf8,…');
}
article:after {
show: block;
place: relative;
prime: 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 recordsdata 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 deciding on 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 sort of content material.
House web page overlay
My ultimate problem was implementing the action-packed graphic I’d designed for Mike Price’s house web page. This accommodates 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 { 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 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 could possibly 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 short 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));
}Chances are 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 stuffed 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: You need to take a recent take a look at border-image
The border-image property is a robust, but typically ignored, CSS device that provides unbelievable flexibility. By slicing, repeating, and outsetting photos, you possibly can create intricate borders, ornamental parts, 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 parts, border-image can create visually hanging designs with out counting on further markup or a number of belongings.
Should 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 possibly can see examples from this article on CodePen.
About Andy Clarke
Also known as 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 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 attain their objectives by way of 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.
