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

@sanjoyas sanjoyas commented Jan 17, 2018

Thanks !

@IvanGrimes

This comment has been minimized.

Copy link

@IvanGrimes IvanGrimes commented Feb 7, 2018

Thank you!

@luisgagocasas

This comment has been minimized.

Copy link

@luisgagocasas luisgagocasas commented Mar 21, 2018

Thanks bro!

@tinyzh

This comment has been minimized.

Copy link

@tinyzh tinyzh commented Apr 18, 2018

Thanks !

@RubensTen

This comment has been minimized.

Copy link

@RubensTen RubensTen commented Apr 22, 2018

super like brother, thanks!

@Spotlightsrule

This comment has been minimized.

Copy link

@Spotlightsrule Spotlightsrule commented May 6, 2018

Thanks for posting!

@sishbi

This comment has been minimized.

Copy link

@sishbi sishbi commented Jun 28, 2018

Thanks, you are a life saver!

@mhuggins

This comment has been minimized.

Copy link

@mhuggins mhuggins 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

@Antoine-lb Antoine-lb commented Aug 1, 2018

Just what I needed 👍

@dudusleal

This comment has been minimized.

Copy link

@dudusleal dudusleal commented Aug 5, 2018

Thank you

@cpietsch

This comment has been minimized.

Copy link

@cpietsch cpietsch commented Aug 10, 2018

you're the man!

@bianpratama

This comment has been minimized.

Copy link

@bianpratama bianpratama 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

@GiovanyR GiovanyR commented Aug 24, 2018

epic!

@iooops

This comment has been minimized.

Copy link

@iooops iooops commented Sep 2, 2018

Thanks!

@Aliciabcd

This comment has been minimized.

Copy link

@Aliciabcd Aliciabcd commented Oct 29, 2018

Thanks~

@florentdestremau

This comment has been minimized.

Copy link

@florentdestremau florentdestremau commented Nov 23, 2018

just what I need, awesome !

@jarrodagims

This comment has been minimized.

Copy link

@jarrodagims jarrodagims commented Nov 27, 2018

@bianpratama This does not work at all.

@bayern12

This comment has been minimized.

Copy link

@bayern12 bayern12 commented Feb 25, 2019

Thanks !

@phi0411141

This comment has been minimized.

Copy link

@phi0411141 phi0411141 commented Mar 6, 2019

thank you!!!!

@dmitriy1a222221

This comment has been minimized.

Copy link

@dmitriy1a222221 dmitriy1a222221 commented Apr 1, 2019

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

@rayets123

This comment has been minimized.

Copy link

@rayets123 rayets123 commented Apr 25, 2019

awesome!!!!

@swartex

This comment has been minimized.

Copy link

@swartex swartex commented May 20, 2019

THANKS!

@madbanty

This comment has been minimized.

Copy link

@madbanty madbanty commented Jul 25, 2019

Thanks

@ddareus

This comment has been minimized.

Copy link

@ddareus ddareus 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

@mufaddalmw mufaddalmw 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

@colinFerris314 colinFerris314 commented Oct 15, 2019

Does anyone want to elaborate on how this works?

@mrpinkcat

This comment has been minimized.

Copy link

@mrpinkcat mrpinkcat commented Oct 21, 2019

<3

@AlexKund

This comment has been minimized.

Copy link

@AlexKund AlexKund commented Dec 16, 2019

Thanks :)

@AdenGames

This comment has been minimized.

Copy link

@AdenGames AdenGames commented Dec 31, 2019

ty

@alexg-93

This comment has been minimized.

Copy link

@alexg-93 alexg-93 commented Jan 9, 2020

YOU ARE THE MVP !! THANKS :)

@RealDekkia

This comment has been minimized.

Copy link

@RealDekkia RealDekkia commented Jan 24, 2020

Thanks!

@cfinn16

This comment has been minimized.

Copy link

@cfinn16 cfinn16 commented Jan 30, 2020

Been at this for hours and this thread finally gave me the solution — thank you!

@arthuravilla7

This comment has been minimized.

Copy link

@arthuravilla7 arthuravilla7 commented Jan 31, 2020

god bless you!

@MaciejGarncarski

This comment has been minimized.

Copy link

@MaciejGarncarski MaciejGarncarski commented Feb 15, 2020

You did good job man!

@ddareus

This comment has been minimized.

Copy link

@ddareus ddareus commented Feb 16, 2020

@mjfneto

This comment has been minimized.

Copy link

@mjfneto mjfneto commented Apr 18, 2020

Thank you!

@fetimo

This comment has been minimized.

Copy link

@fetimo fetimo commented Apr 28, 2020

🙌

@meugeniatr

This comment has been minimized.

Copy link

@meugeniatr meugeniatr commented May 5, 2020

you are the king

@AZERK0

This comment has been minimized.

Copy link

@AZERK0 AZERK0 commented Aug 13, 2020

THAAAAAAAAAAAANKS

@muhamax

This comment has been minimized.

Copy link

@muhamax muhamax commented Aug 18, 2020

thanks!

@vasinl124

This comment has been minimized.

Copy link

@vasinl124 vasinl124 commented Aug 25, 2020

Save my day!

@andrewilliams876

This comment has been minimized.

Copy link

@andrewilliams876 andrewilliams876 commented Oct 27, 2020

Thanks so much

@oxavibes

This comment has been minimized.

Copy link

@oxavibes oxavibes commented Nov 6, 2020

Thanks! 👍

@michelleromao

This comment has been minimized.

Copy link

@michelleromao michelleromao commented Nov 13, 2020

thankyouuu

@saideepthi909

This comment has been minimized.

Copy link

@saideepthi909 saideepthi909 commented Nov 17, 2020

use this method border only gradient..

    height: 200px;
    width: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #fff;
    background-image: linear-gradient(90deg,#ff8a00,#ccc);
    padding: 4px;
@LuisSaybe

This comment has been minimized.

Copy link

@LuisSaybe LuisSaybe commented Nov 18, 2020

If one has padding background-clip: padding-box, border-box; works much better

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.