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 👍

@dudusleal

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!

@madbanty

This comment has been minimized.

Copy link

commented Jul 25, 2019

Thanks

@ddareus

This comment has been minimized.

Copy link

commented Sep 1, 2019

Thanks big man you got it right. But you can play with it to have only transparent background and round borders.

@mufaddalmw

This comment has been minimized.

Copy link

commented Sep 26, 2019

It fill background color as well. incase If I need to use over the image with transparent background, this doesn't work.

@colinFerris314

This comment has been minimized.

Copy link

commented Oct 15, 2019

Does anyone want to elaborate on how this works?

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.