 Sometimes we need a border on an element that is not just a simple solid color like maybe it has two different colors in it or it has a gradient in it or it even has some sort of fancy pattern going on with it and we're going to see how we can do all of those things in this video. Hello my friend and friends, thank you so much for coming to join me once again and if you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and we're going to be doing that today by looking at border images which for me are definitely a blast from the past. If you don't know about the old days of web development we actually use these to make like buttons with rounded corners and stuff before border radius existed and I guess I'm showing my age a little bit there but we can still use border image for some really useful and fun things as well instead of having to sort of hack solutions like that. So if we dive in here is a pretty simple example we're going to start with sort of breaking things down in a really simple way. So I have these dibs here we just have three of them that are all this border image that has an h3 and a paragraph in them and what we're going to do is I have this image that I've already created and I want to use this and we're going to look at why use it like I could just set this as a background image because look I left an empty space in the middle and everything for it but there's downsides to that as you might have discovered if you've tried doing this before. Let's start by doing a border on here so we're going to say border and we're going to make it pretty big 40 pixels I'm going to say solid and it's already white and the reason it is white is because if you don't declare a color on a border it will just take your current text color so that is there and it's working nicely but obviously we want to get that image in there and to be able to do that we're going to come in with border image and you can actually see there's a lot of border image properties including border image width if you use the border shorthand and you set the 40 pixels and a solid there you don't actually need to use the border image width you can just leave that and you do need to have the solid on there as well or the image won't show up so border 40 pixel solid and then the first one we're going to go with is the source right here to say well what's the source of the image and this is just like anything else or like setting an image for anything else in CSS where we use the URL function and in here you just write the name of the path which for me is gold blue border dot jpeg which will bring it in because I haven't done anything fancy and oh my goodness that does not look how I expected it to and this is where things get a little bit weird with border images uh in how it works by default where it's just setting it on all four corners and the reason for this is it doesn't know how you want to use the border image and we sort of have to give it some extra information and that's what some of these other properties are for so the next one we're going to do is our border image slice and the border image slice is an interesting one because it's actually we're going to slice up our image I'm going to look at sort of how we can do it but then some tools that can help you with it so let's try doing a 40 and just hitting save and my image is sort of coming in look at that what's happening here and if I change this to a 10 that it's well now I have like a different pattern going on which kind of looks interesting actually or you try 100 and we have something else going on and to explain this I think it's much easier to do it visually and the border image generator here from Mozilla is actually a pretty good tool for this and I'm just going to move it to take up more of the screen here and you can do it with their default images you can play with these or you can actually upload your own image so I'm going to upload mine because I think that's going to be easier to understand what's going on with our own code all right so here is the image and what the slice is doing is it's controlling where these lines are pretty much and what you generally want to do if you have this type of like pattern anything going on is isolate a corner so what I'm going to do is let's just drag it sort of to where that the end is right here and I'll just do this quickly it seems to be on a 50 so let's just do 50 for all of these and you'll notice while I'm doing this it's actually showing me a preview the preview you can move around to try and play with it just to get it where you want and what this is doing is it's actually showing me what I want my slice to be so border image slice here and I think I'm just going to do 40 for all of them for now just for the like demo purposes so let's just move that back in and let's try putting 40 here and seeing what happens and you can see look at it's filling up or maybe 48 actually would be better let's try 48 I mucked up my bottom a little bit but it's fine so what's happening here is it's putting in that background image and it's taking each one of these corner bits that I sliced and it's locking those corners into that space so the corners are always locked the corners will never change what will change is these middle bits that are able to stretch and pull a little bit and I think to highlight that what we'll do is we'll actually eliminate one of these we'll just comment it out and see how it sort of stretched that top bit across now so if we now actually if I change the screen size let's do this with the dev tools so if I open the dev tools and then I just go to responsive mode and let's on dock this so they're not in the way and then we can actually see that like the top bit is stretching and and filling but the corners are really locked in and like here like this looks really ugly up and down whereas across here is looking okay and the corners are looking fine so it really depends on like how the layout is it's stretching pulling it's kind of awkward a little bit but we can improve on this and that doesn't have to be the behavior that we're actually getting so one way we can change what that behavior is is to do a border image repeat and this isn't to the repeat that you would think of where we have the default is actually repeat if you leave repeat nothing much will change here but one that I find really useful is round and what round is going to do is it should show us more see if we look at the top bit here notice how it's repeating the background that like pattern here for we have four of whatever this shape is and then once it starts running out of room for that and it's getting too squished it's actually changing how that pattern is repeating itself and then it's changing it again oh it won't actually okay so it's repeating and repeating then we're running into this world like here it actually looks pretty good because it's the right shape so what we can actually do for that is change here also how things are working a little bit so I'm going to actually change my number here to like an 80 instead just to show you a little bit of I think it just looks a little bit nicer overall and how it's repeating now I have a problem with my my blue coming through we're going to fix that problem in a second because it's using part of that you can see that it just sort of it's repeating itself but because it's 80 and it's changed my slice number on there basically let's go look at what that's doing is it's actually doing an 80 this way but it also means the corners are a little bit bigger and they're coming down more this way and that way so my corner sections are bigger and the background piece that has to repeat is not as big as it used to be this section here is much smaller than it was so because that section is smaller it actually repeats a little bit better um and it's able to shrink down and grow everything a little bit better so it looks a little bit less ugly now I mentioned there's the ugly thing with the background color here now of course I could just do this on a transparent background and then not worry about that but another thing we can do with the slice is we can add a fill here so if I do a fill it's actually going to take the color that's in the middle here and use that as a background color or background image as well so if you had a pattern that was coming here it would use that as the background image for the middle space and the fill keyword can go anywhere because right now I'm using 80 but as you see here I can actually do different sizes and I can you know I can control this in any way I really want to do and so you can have separate properties for each one of your border image slices and you just repeat the values so here I could do something like you know 40 80 120 and 200 if I wanted to it's going to muck everything up it doesn't work with this image and it's even mucking up my background a little bit because of that but it gives you an idea that you can put different values and that fill keyword can either go at the end here or I could take the fill and I should be able to I think put it at the start and it should work fine just don't put it right in the middle because then it sort of breaks things and the property doesn't work anymore so I'm going to take the fill off of there and let's put the fill back here and let's just put this back down over to an 80 and it does take setting up an image and getting the image a decent image that you can use to be able to do this type of thing and there's you know just looking at border images and stuff like that you should be able to get things that repeat themselves and actually work out pretty well and you might just have to play with where your slices are to get things to line up so the repeating behavior of it actually looks good and you're not getting breaks in really strange places but that's not all we can do we can do stuff with gradients as well because gradients are a type of background image so this is where I think some of the more today use cases come in so if we come here and I do a we'll do the same thing we're going to do a border let's just do 10 pixels solid but instead of doing it on all sides because we could do that I could just say border top and by specifying that I only have a border on the top then I can have a gradient only on the top um so let's add a little bit of space there so when you a padding block start of 10 pixels and actually if I'm doing block start here I think border also takes logical properties so we'll add that there perfect um you know so you can just control your your one right there um but now what I could do is I can come in with my background image source and I can say it's a linear gradient and let's just put this on a separate line so we don't have to worry too much and let's just do a red blue and hit save of course it's not background image source it's border border image source sorry but you'll notice I don't actually have anything and you're going well I put it why isn't it showing up and even though we're doing it with a gradient you still need to have your border image slice for this to work and I'm just going to put a one and you can see it has actually come in now the problem is because my gradient by default is up to down it looks like it's solid red so let's just come here and do a whoops and do a 90 degrees so it turns it left to right you can see there's my gradient and you know what let's not do that on all the sides let's just do border on all the sides and do my padding on all the sides and there you go or I guess then we don't need 98 degrees we could do like a 45 degrees uh you can get sort of a border that's going around and as you could actually come here and change your slice number um and you might find that it's going to impact how things look um if I had the fill on here it would actually look really weird let's throw the fill so you can see it creates this really kind of awkward thing um with bigger numbers I'm not actually sure how it works with gradients with the fill I just put one and it tends to work um so that's my method um but let's go back a little bit let's actually we'll copy this one so we can work a little faster um and we're gonna do one small tweak on this one which is let's go back to the inline start actually for these two um our block start I should say block start but instead of having it go like this where it's an actual gradient let's change this over to 90 degrees so it is left to right and then what we could actually do on this and we're going to extend this out so we can see the code is after the red and after the blue these are the gradient stops and this is the updated syntax um the older syntax was a little bit harder to put gradient stops in but now it's nice and easy so the red goes to 50 percent the blue is basically starting at 50 percent um and it creates a solid line and then maybe you know let's do this at like five um or three you might have a design or something that needs sort of this two colored line for something I've seen stuff like that come up and it looks like it would be really hard to do but luckily it's not that bad it's actually kind of easy um with with that you can do it with pseudo elements and other stuff but with a border it works perfect and there we go and another fun effect that we could do with this with gradients is taking advantage of transparency so let's do a border let's do our border on my inline start as well as a border uh block start so it's on the left and the top and for each one of those we'll just say that for now we'll do 10 pixels solid and so we get it on both of those and we'll add the padding there as well padding inline uh we'll just speed this up with doing it on all sides and so we get a bit of space there and then what we could do is instead of using a linear gradient we could come in with a radial gradient so let's do border uh image source and a radial gradient and the reason I want to do a radial gradient is even though we're only placing the uh the border on these two right here it's if we come into this radial gradient let's just turn formatting off for now so it stops formatting my code we're going to do for this one a circle at top left so it's going to be a radial gradient as a circle starting at the top left right here and because it's a circle at the top left we're going to break this up there we go uh we're going to go from lime green to trans transparent and of course it just takes up the corner because hopefully you remember that we need to have a border image slice throw a one on there and cool right now part of the problem is the transparent's not really kicking in where I want it to so let's come in here and say that like 50% is where the transparent's at uh and there you go you get this sort of like interesting border effect and maybe 10's a bit big here let's do like a three or four and you sort of get this interesting effect definitely not something you'd use on every single side of yours but it could come in handy in the right situation and if you'd like to know more about gradients and the types of things you can do with stops and radial gradients and other linear gradients and all the fun things you can do with them I do have a video right here for your viewing pleasure and with that I would like to thank my enablers of awesome Jan, Johnny, Kyle, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for their generous support and of course until next time don't forget to make your coin on the internet just a little bit more awesome