How to add a border & rounded corners to a box in Bootstrap

Hi there, in this video we are going to look at adding borders. We're going to put a black border around it, but no border on this. We're going to add rounded corners on one side, square corners on the other. It's a border and rounded corner extravaganza. 

So we want to do a couple of things. I added a black border around the outside of this, just so that I could make this into the tutorial, because you need to work out the borders. I also added rounded corners that I didn't really want, just to add them to the tutorial. And we did it-- kind of cool thing about the borders, is that it's rounded on one side, but not on this kind of internal gaps. So let's work out how to do that now. 

Check out the documentation. So 'Documentation' it's called 'Borders'. And let's look at what we got. That looks good to me. So it's under 'Utilities', 'Borders', there's a bunch of stuff. You can say, Border, just the top, or put a Border around the whole thing. There's also Border colors. So I want to put a Border, and then a Border, let's go to Border dark. 

So both of these are going to go on my Text box. So let's go to VS Code, let's add it to this Class here, or this Div, got lots of things going on here now. Let's see if that works. Success, we've got a black one around the outside. Let's look at the rounded parts, should be in the same, same bit, if we scroll down, there we go, Border radius. 

You've got kind of two options. You've either got just a little bit of rounded, or a full circle. So you can decide whether you want Rounded, which is just our rounded corners, or you can do rounded circle. Actually that turns it into a full circle. There's another one called Pill, which kind of does the big ends, but leaves the long end. And Rounded zero, you’d only use if, say one of the components has a default round. You can turn it off by making it Rounded zero, and you've got two sizes for these rounded corners. They look exactly the same. Large and small, not very big differences. 

The other thing is that I want to do, remember, we did Rounded right, and left. So we'll start with the first box, would be Rounded left. So we're going to apply it to, now we applied the other one to the whole kind of column, for this second one here. It doesn't work in this case because we've got this image. We want to apply it around the Image, not the actual Class. I'll show what I mean. 

So we need to first of all tell it it's a border. Don't forget that part, and we need to say, Rounded right, uh, Rounded left. And that is only going to partially work, let's have a look. Because it puts around the edge of the column, that's not what I want. I want to put it around this image. So the exact same things can go on the image itself. So Image Source, we've got a class of Fluid. Put them both on there, and there we go. We've got Rounded left, but it's square on the right, it's used a white border, but let's make it the Border large as well, which doesn't make a significant change, but there it is. 

Lastly, it's given it a white line around the outside, it's not what I want. So let's get rid of that default. So here, let's have a look at Border color, not Border color, because I don't want to add a color, I want to try and, you can see there, we can add a Border of 0, nice. Good little examples up there. So let's say, Border, so on my image here, Border large, let's make it Border 0. There you go, it's got little rounded corners on the edges, and there is no Stroke around it. Let's do the Borders on the right here. 

So instead of left, we're going to do it to this column here. Lots of stuff going on, after Border dark, it's going to be Rounded left. It didn't work, who needs you, Rounded right. Oh, lovely rounded corners. The other thing I want to do is make sure that it is Border large. There you go. All right, that's it for our exciting Border video. We did some rounded corners, we added some lines around the outside. Let's get on to the next video.