How to Add a Double Border with Different Colors?

Double borders can be added with a different color to make the content more attractive and unique from other parts of the page. For this purpose, the “:before” selector is utilized, and the “content” property is used to extend the content. This article demonstrates the step-by-step instructions to add double borders with different colors.

How to Add a Double Border with Different Colors?

To add a double border on any shape using CSS, the “:before” selector is famous. It changes the colors of both borders to make them unique. The step-by-step procedure provided below to add a double border with different colors:

Step 1: Add Div Element and Assign Classes

In the HTML file, add the div element inside the <body> tag and assign a “class” with the name of “double-border”. Users can create their own class name as well:

<div class="double-border">


Step 2: Create Style Tag

In this step, create a portion for the class “double-border” and make it one copy with the “:before” selector. In this way, the CSS properties will be applied to our classes:


.double-border {


.double-border:before {



Step 3: Add Styles to the Class

The CSS properties apply to the div element which has a class of “double-border”. The following styles are mentioned below:

.double-border {

background-color: #ccc;

border: 4px solid green;

padding: 50px;

width: 16px;

height: 16px;

position: relative;

margin: 0 auto;


The description of CSS properties is given below:

  • First, add “background-color” which is gray and the “border” of 4px weight and green color.
  • The “padding” of 50px to create the inner space of 50px from all sides.
  • In the end, the “width” and “height” of 16px. Also, the “margin” is 0 auto which means top and bottom margins will be zero and left.

The webpage looks like this:

The output displays that the border is applied to “div”.

Step 4: Addition of CSS Selector

Now, move toward the second box in the style tag which has the “:before” selector attached, and write the below code:

.double-border:before {

background: none;

border: 4px solid blue;

content: "";

position: absolute;

top: 4px;

left: 4px;

right: 4px;

bottom: 4px;


The properties are explained below:

  • Use the “position” property to make the position of an element fixed.
  • After that, the “top, left, right, and bottom” defines the margin of the newly created item from the original one.
  • A CSS selector called “:before” adds content in front of a chosen element.

The output look like as:

That is how a double border can be added using different colors.


To add a double border, create a div element first and assign it to a class. Then, add the CSS “position” property which must be set to relative. Following that, add the CSS Selector “:before” to it so that users can add content before a chosen element. This guide has demonstrated the usage of double borders with various colors.

About the author

Abdul Moeed

I'm a versatile technical author who thrives on adaptive problem-solving. I have a talent for breaking down complex concepts into understandable terms and enjoy sharing my knowledge and experience with readers of all levels. I'm always eager to help others expand their understanding of technology.