How to Set Different Borders on Each Side in CSS

In this CSS tutorial, we’ll walk you through the process of setting different borders on each side of an element using CSS.

Step 1: Understand the CSS Border Properties

Before we dive into the process of creating customized borders, it’s important to understand the different CSS properties that are used to create borders.

The three main properties are:

border-width: This property sets the width of the border. The width can be set in pixels, ems, or other units of measurement.
border-style: This property sets the style of the border. The style can be set as solid, dotted, dashed, double, groove, ridge, inset, or outset.
border-color: This property sets the color of the border. The color can be set as a keyword, hex code, RGB value, or other color format.

Step 2: Create a Basic Border

To create a basic border around an element, you can use the border property.

This property is a shorthand property that sets the width, style, and color of the border all at once.

For example, the following code sets a solid, 2-pixel border with a red color:

div {
border: 2px solid red;
}

Step 3: Set Different Borders on Each Side

Now that you have a basic understanding of the CSS border properties, you can start setting different borders on each side of an element.

To set different borders on each side, you’ll need to use the following properties:

border-top
border-right
border-bottom
border-left

For example, the following code sets a solid, 2-pixel border with a red color on the top side of the element and a solid, 1-pixel border with a blue color on the bottom side of the element:

div {
border-top: 2px solid red;
border-bottom: 1px solid blue;
}

Step 4: Use the box-sizing property

By default, the width and height of an element are calculated based on the element’s content.

However, if you want the width and height of an element to include the element’s padding, border, and margin, you can use the box-sizing property.

For example,

div {
box-sizing: border-box;
}

This will include the border in the width and height of the element, so the element will take up the same amount of space as it would if the border were not present.

Step 5: Use border-radius property to make it round

You can use the border-radius property to make the corners of an element rounded. The value of the property can be set in pixels or other units of measurement.

For example,