| by Arround The Web | No comments

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.

Share Button

Source: linuxhint.com

Leave a Reply