Designers Learn Code: Border-Width, Border-Style, and Border-Color

Designers Learn Code: Border-Width, Border-Style, and Border-Color

What if you have a situation where you don't want the same width, style, or color border all around? In this case, you cannot use the shorthand we went over in yesterday's video. Instead you need to specify the border-width, border-style, and border-color separately and you can name up to four values. Just like with margin and padding, we follow the same convention of clockwise from the top, so top, right, bottom, and left. But if we don't provide four values, we have to understand how the CSS is read.

border-width: 20px medium thin 5px;
border-width: thick 10px thin;
border-width: thick thin;
border-width: medium;

With four values, the top border is 20px, right border is medium, bottom border is thin, and left border is 5px. With three values, the top border is thick, right and left borders are 10px, and bottom border is thin. With two values, the top and bottom borders are thick while the right and left borders are thin. With one value, all borders are medium. This convention is followed for border-style and border-color as well.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: get.designerslearncode.com/jumpstart

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.