Border

CSS provides several properties that allow you to define the style, width and color of the element border. Setting the borders can be useful as a decoration, and can perform more practical functions, such as highlighting important or interactive elements on a web page.

In this topic we will learn how to set the appearance of the borders, and then try to draw the border with just one property.

Border style

Let's start with the property that allows you to display the borders of elements and set their style: border-style. Thanks to it, you can make ordinary, dotted or double borders, even ones that make elements look three dimensional! There are many different values that influence the boundary style. They are represented by keywords.

These are the most frequently used ones:

Now take a look at the syntactic features of this property:

h1 {
  border-style: double;
}

In the code written above, we set the <h1> tag as a double border.

Border color

The border-color property sets the color of the border. If it is not specified, the border color will be the text color of the element.

Here is an example of how to use this property:

p {
  border-style: solid; /* it sets a border */
  border-color: brown; /* it sets the color of the border */
}

This is roughly what the result of running this code looks like if you apply the written styles to an HTML file:

Here we've set the brown border color for element <p>.

Border width

The border width is defined with the border-width property and any length unit in CSS, for example, pixels:

h4 {
  border-style: dotted; /* it sets a border */
  border-width: 4px;    /* it sets the width of the border */
}

Let's look at the result of this code execution:

In this example, we've set the border width of the <h4> element to 4 pixels.

Border property

To set the style for the border, it is not necessary to use all three of the above properties in turn. It’s enough to know about the general universal property of border, with which you can change styles much faster and save space in your CSS file. To do this, write down the values for all three properties in any order:

p {
  border: 2px solid gray;
}

Let's execute this code:

Now element p has a gray solid border 2 pixels wide. As you can see, using the border property greatly simplifies the task.

Border for one side of the element

It is also possible to set a border for one side of the element only.

You can apply borders to individual sides of an element using properties like border-top, border-right, border-bottom, and border-left. on the top, right, bottom, and left sides of the element respectively. Take a look at how you can make an interesting border-bottom at the bottom:

<p>In<span>troduction to C</span>SS</p>

span {
  border-bottom: 2px solid green;
}

The same beautiful design will be created by combining these properties. For example:

<p>News</p>

p {
  border-bottom: 2px solid red;
  border-left: 2px solid red;
}

Conclusion

Mastering border styling in CSS opens up a wide range of possibilities for enhancing the visual appeal of your web pages. From simple solid lines to intricate designs, borders can help you highlight key elements, create separation, and add depth to your layouts. By understanding how to use individual properties like border-style, border-color, and border-width, and combining them with the shorthand border property, you can efficiently customize borders to fit any design need. Whether you're adding subtle touches or bold accents, these skills will enable you to create more engaging and user-friendly web experiences.