Profile picture of Michael Großklaus

Michael Großklaus

Doing frontend things at factorial.io and created miyagi.dev.

GitHub
github.com/mgrsskls
Mastodon
indieweb.social/@mgrsskls
RSS
/feed.xml

Built with Eleventy & hosted on Netlify.

Gradient border

Date:
Tags:

Without rounded corners:

border: solid 0.25rem;
border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);

With rounded corners:

border: solid 0.25rem transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;

Drawback: You need to set a solid color as background, so it cannot be transparent.