I want to have this kind of output below. I seem cannot find any sources on how to do it. I only found this kind of code below but is not extending its color to other divs
.border-gradient {
border: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
Related
Can I produce something like this with a single image using css and html:
This is the single image
I have tried using border-image but it did not work out as expected. This is what I got with border-image:
My Code:
border: 40px solid transparent;
border-image-source: url(../images/mlt-border.png);
border-image-repeat: round;
border-image-slice: 10;
But I need the image to be repeated as in the first picture.
Yes, you can do it with one image, but that image needs to be divided into 9 sections, where the corners of the image correspond to the corners of the border, and similarly the edges of the image correspond to the edges of the border. In this case, you just need a 3x3 grid of the same image, like so:
Then you need to use the border-slice property to specify which parts of the image should be used for which parts of the border. The 47's and 40's correspond to the fact that each of the 9 cells of the image is 40px wide by 47px high.
.border {
width: 200px;
height: 235px;
border-style: solid;
border-top-width: 47px;
border-right-width: 40px;
border-bottom-width: 47px;
border-left-width: 40px;
border-image: url("https://i.stack.imgur.com/EGyqa.png") round;
border-image-width: 47px 40px;
border-image-slice: 47 40 47 40; /* measuring in px from top, right, bottom and left edges of the image respectively */
}
<div class="border"></div>
A full explanation of the border-image syntax can be found here.
Here there are two samples, round and stretch:
#borderimg-round {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round; /* Opera 11-12.1 */
border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round;
}
#borderimg-stretch {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
-o-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
}
<!DOCTYPE html>
<html>
<body>
<p id="borderimg-round">border-image: url(image.png) 20% round;</p>
<p id="borderimg-stretch">border-image: url(image.png) 20% stretch;</p>
</body>
</html>
If you have problems, post here more details!
I have the following image which I am trying to set as an image border (I've added the red just so that you can see it properly — the real version is trimmed with transparent bg)
Dimensions: 363 x 10
I am trying to set it as a border image just for the top border (for the time being):
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
If I set border-image-slice: 15%; the general shape of the top border looks correct (I think), but it looks really blurry:
Can anyone see why this is? Originally I left border-image-slice out but the image was only showing in the corners... and played about with different values but none seemed to give me the correct result
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
Look at your code..
Radius 0 and image slice 15% and solid border..
That is you have to have such an image.
I'd like to simulate a drop shadow effect using border-image and linear-gradient (for scroll performance reasons, I am not using the native box-shadow effect).
As can be seen in the example below and in the fiddle, my attempted approach involves using border-image for the gradient, border-image-outset to move the shadow outside the content box, and border-width to show only the bottom edge.
Admittedly, I don't understand border-image so well, particularly when it comes to using it with linear-gradients. Through trial and error, I achieved what seemed to be a satisfactory result. But as it turns out, when the width of the div is short enough, the "shadow" disappears entirely.
What can I do to achieve a drop shadow like in the top box, but one that works regardless of the box size? Your help with this is really appreciated!
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
For the short border to work you need to change the
100 repeat;
to
0 0 100 0 repeat;
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
This link may help you a little on your border imaging https://css-tricks.com/understanding-border-image/
For background-image you can add as many radial-gradient and/or linear-gradient you want. But for border-image it seems like you can only add one. If find it quite strange, because the principle of how to display gradients should be the same for border and background, right?
Is there a way to add more than one gradient in border-image? I'm only interested in a pure CSS solution.
This doesn't work, because it contains more than 1 gradient:
div {
height: 30px;
width: 40px;
border: 50px solid black;
border-image:
radial-gradient(circle at 20px 30px, green 20px, rgba(0,0,255, .5) 20px),
radial-gradient(30deg, blue 22px, red 22px);
}
https://jsfiddle.net/thadeuszlay/p6r2p78g/
This works, but contains only one gradient:
div {
height: 30px;
width: 40px;
border: 50px solid black;
border-image: radial-gradient(circle at 20px 30px, green 20px, rgba(0, 0, 255, .5) 20px);
}
https://jsfiddle.net/thadeuszlay/p6r2p78g/1/
No, you can't set more than one image to the border-image shorthand or the border-image-source longhand property.
As per spec for border-image-source, we can see that only one image layer is specified as value.
Name: border-image-source
Value: none | <image>
whereas for background-image, we can see that multiple layers are specified.
Name: background-image
Value: <bg-image> [ , <bg-image> ]*
Below is an extract from the spec which introduces layering of background images: (emphasis mine)
The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.
Just stubled upon this question when I was looking for the same thing.
But for other people, trying this:
You could just add a pseudo-element, and give that one a border too.
Guessing you would use transparent, because otherwise multiple gradients wouldn't be visible at all.
I've got the following:
h1{
--border-width: 5px;
border-width: var(--border-width);
border-style: solid;
border-image: linear-gradient(135deg, #ff0000, transparent 20%);
border-image-slice: 1;
font-size: 5rem;
position: relative;
}
h1::after{
position: absolute;
inset: calc(var(--border-width) * -1);
content: '';
background: transparent;
border-width: var(--border-width);
border-style: solid;
border-image: linear-gradient(135deg, transparent 80%, #ff0000 100%);
border-image-slice: 1;
}
I set the inset of the pseudo element to negative the border-width to make sure it aligns with the parents border.
I'm looking for a way to add a gradient border (from black to grey) only to my top and bottom borders and none to the edges.
Is there any simple way?
border-top: 10px solid red;
border-bottom: 10px solid red;
border-left-width: 0;
border-right-width: 0;
border-image: linear-gradient(to right, red, violet) 1 stretch;
border-right-width and border-left-width are required for Chrome and Safari.