Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
border-image

7 Articles
{
,

}
Direct link to the article Flip, Invert, and Reverse
border-image SVG

Flip, Invert, and Reverse

The SVG <path> syntax is a beast. There are all sorts of commands that make up a mini-language all of its own — so powerful that it’s capable of drawing anything. Don’t be too scared of it, though, because some …

Avatar of Chris Coyier
Chris Coyier on Dec 8, 2021
Direct link to the article CSS-ing Candy Ghost Buttons
background-clip border-image buttons clip-path ghost buttons gradients mask mask-clip mask-composite mix-blend-mode

CSS-ing Candy Ghost Buttons

Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and …

Avatar of Ana Tudor
Ana Tudor on Oct 31, 2021
Direct link to the article How to Animate a SVG with border-image
animating border border-image SVG animation

How to Animate a SVG with border-image

Let’s take a look at how to combine the border-image property in CSS with animated SVGs that move around a border. In the process, we’ll cover how to hand-craft resizable, nine-slice animated SVGs that you can use not only re-create …

Avatar of Uri Shaked
Uri Shaked on Dec 3, 2020 (Updated on Dec 4, 2020)
Direct link to the article Stacked “Borders”
border border-image

Stacked “Borders”

A little while back, I was in the process of adding focus styles to An Event Apart’s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and …

Avatar of Eric Meyer
Eric Meyer on Mar 19, 2019
Direct link to the article Gradient Borders in CSS
border border-image gradients

Gradient Borders in CSS

Let’s say you need a gradient border around an element. My mind goes like this:

  • There is no simple obvious CSS API for this.
  • I’ll just make a wrapper element with a linear-gradient background, then an inner element will block
…
Avatar of Chris Coyier
Chris Coyier on Dec 28, 2018 (Updated on Sep 30, 2022)
Direct link to the article Slicing SVG 9 Ways
3d border-image shadow SVG

Slicing SVG 9 Ways

Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well:

The shadow may need to move around or fade, so we need a solution that we can animate with transforms & opacity,

…
Avatar of Chris Coyier
Chris Coyier on Sep 6, 2016
Direct link to the article Understanding border-image
border-image

Understanding border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article, I …

Avatar of Nora Brown
Nora Brown on Jul 21, 2010 (Updated on Mar 2, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top