user profile image

I'd love to know how to make this transparent but keep the "borders" & animation...

I tried border-image to create the borders here:

That solution faces two pitfalls: border-image is not an animatable property, and rounded corners requires the use of a wrapper element with overflow set to hidden.

Other solutions on my mind:

  1. Using pseudo-elements could theoretically work, but I'm not sure adjusting their z-index so the pseudo element is behind it's parent will work.
  2. Make use of the same technique used in this pen, multiple background images. In theory, having one gradient for each side of the border should allow the background to be transparent.

Forked from Declan de Wet's Pen Gradient Border Button.

This Pen is a fork of Declan de Wet's Pen Gradient Border Button.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.