Gradient border css

Css gradient border

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

Source: anastasios-arvanitis.info

Linear gradient border

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;
  }

Gradient border css

.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;
}

Rounded gradient border css

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

Similar codes

0 vote257 views1 answer
100 bytes of css
CSS
1 vote202 views1 answer
Css main container align center
CSS
0 vote275 views1 answer
Button slanted slide on hover
CSS
70 votes257 views4 answers
Css vertical align center
CSS
0 vote287 views2 answers
How to force fully show the keyboard in android
CSS
197 votes395 views6 answers
Connect html file to css
CSS
17 votes258 views3 answers
Rotate image in css
CSS
-1 vote255 views1 answer
Materialize table padding css
CSS
1 vote270 views1 answer
Universal selector incss'
CSS
1 vote254 views2 answers
Dropdown on hover
CSS