How to do a gradient on a border in CSS?

It is possible to do a gradient on borders but it takes a little bit of trickery. It would be better to use an image in order to achieve this result because it's supported by all major browsers. Border-radius is an incredibly useful property, used by many from beginner to experienced CSS developers. Some have asked about the possibility of a gradient on those rounded corners.

css gradient border

By TasiTasi on Feb 19, 2020
  box-sizing: content-box;
  border-width: 8px;
  border-style: solid;
  border-image: linear-gradient(to right bottom, #260B3C, #a053df);
  border-image-slice: 1;

Source: www.anastasios-arvanitis.info

Add Comment

2

rounded gradient border css

By Friendly FerretFriendly Ferret on Oct 05, 2020
div{
  width: 300px;
  height: 80px;
  border: double 5px transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),         /*here must be*/
                    linear-gradient(to right, green, gold);    /*both gradients*/
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Source: stackoverflow.com

Add Comment

1

gradient border with border radius

By RohanRohan on Nov 26, 2020
.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;
}

Add Comment

0

linear gradient border

By Friendly FerretFriendly Ferret on Oct 06, 2020
div-border-and-content-background {
  border-top: double 5px transparent;
  
  /* first gradient is for card background, second for border background */
  background-image: linear-gradient(white,white), linear-gradient(to right, grey, black);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  }

Add Comment

1

border gradient css radius

By Duck Duck Go-ogleDuck Duck Go-ogle on Aug 17, 2020
@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}
<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

Add Comment

1

It allows us to round the corners of an arbitrary element, which can be very useful in positioning elements perfectly.

CSS answers related to "css gradient border"

View All CSS queries

CSS queries related to "css gradient border"

gradient border with border radius textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } css gradient border rounded gradient border css border gradient css radius css border top linear gradient border gradient css css using border top border bottom to create a hamburger icon linear gradient border css gradient text css background linear gradient transparent text color as gradient css how to apply linear gradient to text in css gradient over image css linear gradient css gradient font color css css color gradient background full height background color gradient css linear gradient css background image css linear gradient to bottom right gradient image css css linear gradient css horizontal linear gradient change icon color to gradient css background image with gradient overlay css Css gradient animations gradient text color css html css background linear-gradient css horizontal gradient background color radial gradient css gradient css background how to make a linear gradient in css add gradient to text css radial-gradient css how to se linear gradient in css css gradient background image with color overlay gradient css linear gradient in CSS css button background linear gradient gradient css how to insert gradient in css repeating-conic-gradient css css gradient effect css gradient generator css loader with gradient background image with gradient css CSS background gradient doesn't repeat Css gradient text left to right css remove border input focus css border bottom remove button default border css removing the unwanted border button css css circle border css border right how to add border in css css border radius top css border opacity css border shorthand css remove link border on click css border left css scaling border radius button border css on hover chang only border color of a button css border shadow css box shador of one border css css button:focus border-radius square css border top table border css css text color border css table border-collapse remove border select css css border botttom css text border border width css how to make border for letters in css remove border from last child css inner border css css feather border border-box css css focus border radius css border different sides css curve table border css border radius put an border around an text in css add border to input css triangle using css border white border css remove border table css remove border css border color css border types html css css border-left css border length css border style border property in css css border radius not working how to set border length in css without div remove border radius select css box-sizing border-box vs content-box css how to make border hover effect in css css border width css offset border how to style rule to apply the Border Box model css also define the standard property 'border-radius' for compatibility css(vendor prefix) double border color css border radius css css inverted border radius css input border radius focus css hide mark border table css border css border only top and bottom add color to border css corner border css vertical multi color border css css make border rotate around element how to add a black border around text css hiding text outside of border css how to remove input field border outline on focus css how to make a text with a border in css css label in border outting a border on a map css css border css border style options on different sides css border sides Border weight css text border css linear gradient instagram how to make gradient backgroud cover whole page in html transition background gradient background with image and gradient linear-gradient(top to bottom) text gradient css3 how to mix background image wtih linear gradient how to change button gradient linear-gradient background-image linear-gradient url website gradient gradient text colors repeating-linear-gradient scss gradient mixin sideways linear gradient how to add a gradient background in html gradient ui gradient scss linear gradient not working whitesmoke color gradient background color linear gradient gradient text color gradient generator Gradient Color Code Generator gradient color background gradient generator progress bar bootstrap border remove blue border on a input html remove border from textarea make border to div how to remove border on button click why tr border not showing box shadow to make border bottom remove border between td chrome button black white border border radius not working html font white text with black border change input border color when selected border shorthand remove border on button focus give border to empty div border bottom under text only how to remove onclick input border making border go inside half border bottom delected blue border when an input is selected border buttom color how to give opacity to border change border highlight color on an input text element remove on click border * box-sizing border-box remove clicked button border ion-img border radius border-radius cross browser how to round input border box sizing border box select html stop blue border border-color negative border radius remove the dotted border on links html input type colour internal border border 1px thick border-radius border line animation on scroll down codepen difference bw box and border box javafx set border outside border style shorthand table border color html html button remove border on click show table border collapse border color transparent hide input border on focus

Browse Other Code Languages

CodeProZone