How to change border of heading using CSS?

Answer

To change border of heading using CSS, you can set the border style property for the heading 2 elements with the values like 1px solid, 2px solid #FF0000, 2px dashed rgb(20, 105, 201), etc.

CSS Code

The following is the typical CSS code to change border of heading in HTML page using tag name h2.

Using solid border

h2 {
   border: 1px solid;
}

Using solid colored border

h2 {
   border: 2px solid #FF0000;
}

Using dashed colored border

h2 {
   border: 2px dashed rgb(20, 105, 201);
}

Examples

We shall go through some working examples on how to change border of heading using CSS. In the following examples, you may change the value of border and Run the code to visually observe the changes made to the Heading 2 elements.

Example 1

This is an example on how to change border of heading using solid border.

You may edit the following code, and click on Run button.

Example 2

This is an example on how to change border of heading using solid colored border.

You may edit the following code, and click on Run button.

Example 3

This is an example on how to change border of heading using dashed colored border.

You may edit the following code, and click on Run button.