Css border top linear gradient

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

Css border top linear gradient

.bordertest {
    height:300px;
    width:300px;
    border-top:30px solid #c4268c;
    background:#000;
    position:relative;
    margin:1em;
}
.bordertest:first-child:before {
    content:'';
    position:absolute;
    width:100%;
    height:30px;
    background:linear-gradient(to left, #c4268c, #9a0b72);
    top:-30px;
    left:0;
}

Source: stackoverflow.com

Similar codes

1 vote317 views1 answer
Div border glow effect css
CSS
2 votes314 views1 answer
Minimum margin css
CSS
0 vote317 views1 answer
Center text html css position fixed
CSS
30 votes294 views6 answers
Linear gradient in CSS
CSS
16 votes316 views5 answers
Scss loop
CSS
6 votes400 views2 answers
How do you make each word in a text start with a capital letter?
CSS
0 vote367 views6 answers
Css change svg color
CSS
0 vote313 views1 answer
Comentarios en archivo scss
CSS
0 vote317 views1 answer
Remove all input style'ing
CSS
4 votes310 views2 answers
Background image with color overlay gradient css
CSS