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:
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:
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:
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:
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.
Conclusion
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.
