Border & Border Radius

[00:00:00]
>> Real quick, let's talk about border. I'm gonna fly through these a little bit because the documentation is extremely comprehensive and in reality, we're not gonna use it all. Border, again, in the box model, its content, padding and border. There are many different border styles that you can use.

[00:00:14]
Here's what they look like as according to the Mozilla Developer Network, I've linked that page feel free to click it. We've got dotted, dashed, solid, etc., yes?
>> What do you advise to use? Border, box size or div? Styling div to look exactly like border as well.
>> I would never personally style a div to look like a border.

[00:00:36]
I would always use border or outline. Outline is another good one. Outline is not going to push other elements away from it, so it'll lay on top of anything around it. But if it's just for visual sake, use the properties that exist in CSS. If it's for a semantic content markup, use an element.

[00:00:57]
We can also define border width. We can do that with pixels. We can do that with point, I honestly have never really seen point used. I don't really see the keywords used very often I mostly see border in pixels. And this again, links to the Mozilla Developer Network.

[00:01:16]
You can go play with it there. There's of course border color that we can set. We can use name colors, hex, RGB. We've talked about these in a previous chapter. And then you can set the style of different border sides. This is interesting for creating nice visual designs.

[00:01:30]
We'll see that in a second. But again, there is a border shorthand. So, instead of saying border style, border width, border color, you just use border, right? So, these two rules are doing the same exact thing, but instead of defining three rules we can define just one with that shorthand.

[00:01:48]
Can also define border radius which takes these sharp edges and turns them into more soft curves that takes a pixel or a percentage value. So border radius here we see 30 pixels on all four sides. These are taken from Mozilla Developer Network as well, the docs there. Border radius here, we're setting top and bottom border radius to be 25%, actually, I'm confused about these now.

[00:02:14]
I'm getting myself all confused. It starts top left and goes clockwise, right? So all four values here, like we're seeing top left is 10%, top right is 30, bottom right is 50, bottom left is 70. You can get these fun little squishy shapes. I have to check what these two values are.

[00:02:33]
You know what? Let's check it together. We only have to find two. Where does it go? These are box, yeah, so it's gonna be top left, bottom right, and then top right, bottom left. Kinda confusing, but this documentation is very comprehensive, so go ahead and play around with that if you're interested in more in depth border