Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS rounded corners with gradient border
.rounded-corners-gradient-borders {
width: 300px;
height: 80px;
border: double 4px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
background-origin: border-box;
background-clip: content-box, border-box;
}
@sanjoyas

This comment has been minimized.

Copy link

commented Jan 17, 2018

Thanks !

@IvanGrimes

This comment has been minimized.

Copy link

commented Feb 7, 2018

Thank you!

@luisgagocasas

This comment has been minimized.

Copy link

commented Mar 21, 2018

Thanks bro!

@tinyzh

This comment has been minimized.

Copy link

commented Apr 18, 2018

Thanks !

@RubensTen

This comment has been minimized.

Copy link

commented Apr 22, 2018

super like brother, thanks!

@Spotlightsrule

This comment has been minimized.

Copy link

commented May 6, 2018

Thanks for posting!

@sishbi

This comment has been minimized.

Copy link

commented Jun 28, 2018

Thanks, you are a life saver!

@mhuggins

This comment has been minimized.

Copy link

commented Jul 22, 2018

This is close, but it doesn't work as expected if your element has padding > 0, unfortunately.

@Antoine-lb

This comment has been minimized.

Copy link

commented Aug 1, 2018

Just what I needed 👍

@LouMaster

This comment has been minimized.

Copy link

commented Aug 5, 2018

Thank you

@cpietsch

This comment has been minimized.

Copy link

commented Aug 10, 2018

you're the man!

@bianpratama

This comment has been minimized.

Copy link

commented Aug 23, 2018

@mhuggins, you can just change background-clip: content-box, border-box; to background-clip: padding-box, border-box;

e.g.:

.rounded-corners-gradient-borders {
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 80px;
    background-image: linear-gradient(180deg, #c82517 0%, #971000 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
@GiovanyR

This comment has been minimized.

Copy link

commented Aug 24, 2018

epic!

@iooops

This comment has been minimized.

Copy link

commented Sep 2, 2018

Thanks!

@Aliciabcd

This comment has been minimized.

Copy link

commented Oct 29, 2018

Thanks~

@florentdestremau

This comment has been minimized.

Copy link

commented Nov 23, 2018

just what I need, awesome !

@jarrodagims

This comment has been minimized.

Copy link

commented Nov 27, 2018

@bianpratama This does not work at all.

@bayern12

This comment has been minimized.

Copy link

commented Feb 25, 2019

Thanks !

@phi0411141

This comment has been minimized.

Copy link

commented Mar 6, 2019

thank you!!!!

@dmitriy1a222221

This comment has been minimized.

Copy link

commented Apr 1, 2019

Thank Thank Thank Thank Thank Thank You!!!!)

@rayets123

This comment has been minimized.

Copy link

commented Apr 25, 2019

awesome!!!!

@swartex

This comment has been minimized.

Copy link

commented May 20, 2019

THANKS!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.