xxxxxxxxxx
.gradient-border {
border: 10px solid transparent;
border-image: linear-gradient(to right, #FFC371, #FF5F6D) 1;
padding: 20px;
}
xxxxxxxxxx
box-sizing: content-box;
border-width: 8px;
border-style: solid;
border-image: linear-gradient(to right bottom, #260B3C, #a053df);
border-image-slice: 1;
xxxxxxxxxx
.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;
}
xxxxxxxxxx
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;
}
xxxxxxxxxx
.selector {
border: 1px solid;
border-image: linear-gradient(to bottom, #0000ff, #00ff00);
border-image-slice: 1;
}
xxxxxxxxxx
.border {
border: 1px solid;
border-image: linear-gradient(to right, red, blue);
border-image-slice: 1;
}
xxxxxxxxxx
.gradient-border {
border: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to bottom, #ff8a00, #e52e71);
}
xxxxxxxxxx
.btn-gradient-2 {
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, darkblue, darkorchid) border-box;
border-radius: 50em;
border: 4px solid transparent;
}
xxxxxxxxxx
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;
}
xxxxxxxxxx
.btn-gradient-border {
color: rgb(var(--text-color));
border: 2px double transparent;
background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
background-origin: border-box;
background-clip: padding-box, border-box;
}