Check out a free preview of the full CSS In-Depth, v2 course:
The "Border Color, Style & Width" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

After showing how to set the border's color, style, and width, Estelle shows how to set all of these properties with shorthand.

Get Unlimited Access Now

Transcript from the "Border Color, Style & Width" Lesson

[00:00:02]
>> Estelle Weyl: Let's talk about border properties. So, again, colors, use any color type you want, the default is current color. So, the default for background color was transparent. The default for border color is current color.
>> Estelle Weyl: None and hidden, I would have actually assumed that hidden would take up space, and it doesn't seem to be.

[00:00:39] Then, we have dotted and dashed, solid, double, groove, ridge, inset and outset.
>> Estelle Weyl: Those are your styles.
>> Estelle Weyl: You need to declare, a style in your background, I mean, in your border shorthand or else you won't have a border. It can say three pixels and a color and you still won't have a border, because it needs to have the style.

[00:01:10] That's the only thing that is required, because the default is three pixels, or medium, rather. The default is medium width, and the default color is current color. So it has defaults for those, but the default for border on most properties is none. It used to be that you'd have, by default, border on images no, on linked images.

[00:01:37] So border width, the default is medium. You can say thin, medium, thick, inherit or provide one to four length values. And the length values are in the trouble order which is top, right, bottom, left. And I think everyone knows this already, so we have border style, border width.

[00:01:57] And then border color, and then we have the border short hand. Again, the style is required, the width defaults to medium and the color defaults to current color. An interesting thing to note, which will hit during animations and transitions is when you have a shorthand property such as border.

[00:02:20] And you animate the border, which don't animate the border cuz it looks hideous. But if you're going to animate the border and you're gonna use the border shorthand, your animation and transition events are actually there's gonna be 12 of them. There's gonna be one for top-right, or top border color, top border length, top border color if you're doing it, right border, so you can have up to 12 if you're animating 12 of them.

[00:02:47] So for every time there's a transition of a property and it ends, it throws a transition end event and you can end up having 12 transition end events.