In this page of the borders and lines tutorial, we'll address basic border and line properties: border-width (thickness), border-style, and border-color. We'll start with the code for a basic horizontal line and show you how to modify the thickness and color.

The standard horizontal rule, <hr /> tag, will result in a basic grey line that is 1px in thickness. Simple modifications to this code, or to other borders of other types of elements, will create different effects. In this example the border-width style was used to increase the thickness from 1px to 15px:

You can control the thickness of your borders either by setting absolute values (cm, px, pt, etc.), standardized values (thin, medium, thick), or relative values (rem, vh, %, etc.). While relative values are often considered to be the most accessible as they are responsive to the display, they may not always produce the effect you are looking for. Overall design, purpose, and consideration of your users screen sizes should be taken into consideration when making this decision to use absolute, standard, or relative thickness. Make sure to test all of your design decisions on different types of displays to make sure the attribute settings you selected produce the desire effect. To learn more about this concept, refer to the CSS Units page if W³ Schools.

Adding the Border-style property is an easy way to add visual interest to a border or line. The default border style is solid; other available border-styles include dotted, dashed, double, groove, ridge, inset, and outset. In this example, the dotted border-style was added to a horizontal rule.

In addition to thickness and style, people often want to add color to their borders. Keep in mind that the color palette developed for your course should influence color choices for borders and lines throughout the course. Refer to the Introduction module for color codes and more information.

By default, the border-color for a horizontal rule (<hr>) displays as a light grey line, and visible borders on other elements display as dark grey. If you want to change the color, simply use the style attribute and border-color property to indicate the desired color. Im this example, the border-color style was used to specify the color as "Utah Red", while maintaining the details for width and style.

If you would like to change the line thickness, style (e.g., solid, dashed, dotted, etc.), and color, you can make all of those changes using only the border property. This replaces the need to indicate the border-width, border-style, and border-color properties separately. Note that style is a required component for these properties, while width and color are optional.

In this example, the border property was used to create a thin, solid, "Utah Red" line. 

The border-top, border-right, border-bottom, and border-left properties function similarly to the border property in that width, style, and color are set with one property; however, the settings only apply to the specified portion of the border.

In the following example, the border-left style was used to create a 3 pixels thick, solid, Utah Red line.

When combined, these properties can create more complex lines. In these examples, thickness, style, and color were designated for specific sides to create colorful and visually complex results.