How to specify double borders in CSS
How to Specify Double Borders in CSS
CSS is a rule-based style sheet language used to design and customize web pages. They are used to specify how an HTML element is formatted and displayed on the screen. One of the most common ways we add style to an element is by adding or modifying its border. This can be achieved by using the CSS “border property.”
Border Property
“border” is a shorthand way of specifying an element’s border by specifying its width, style, and color. Therefore, we can say that the border properties actually consist of the following three properties.
- Border-color – This sets the border color, falling back to the current color if none exists.
-
Border-style – This specifies the border style being used, falling back to none if none is present.
-
Border-width – This determines the thickness of the border, with a default value of “medium”.
We can also specify the width, style, and color of each side of the border individually. Note that it is not an inherited property, meaning that if a container element has a border around it, child elements will not have one unless specified.
We can specify borders using one, two, or all three properties. Any value we don’t specify will have its default/initial value as its value.
Example
Below is an example of using borders with all three properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border and its styling</title>
<style>
div {
width: 100%;
height: 200px;
align-content: center;
justify-content: center;
}
#box1 {
background-color: antiquewhite;
border: 2px solid black;
}
#box2 {
background-color: aquamarine;
border: dashed blue;
}
#box3 {
background-color: blanchedalmond;
border: red;
}
#box4 {
background-color: beige;
border: 1px rebeccapurple;
}
</style>
</head>
<body>
<div id="box1">Black 2px solid border</div>
<div id="box2">Blue dashed border</div>
<div id="box3">No visible border</div>
<div id="box4">No visible <div>border</div>
</body>
</html>
As we can see, each type of styling has a different effect on the element’s border.
Specifying a Double Border
Now that we know the basics of using the border property in CSS, we’ll tackle the question of “How to specify a double border with CSS.” Let’s take a quick look at what the border-style property is, what it can do, and how we can use it to solve our problem.
Specifying Double Border Properties
As discussed above, the border-style property controls the style of the border applied to an element in CSS. The border-style property controls how border lines appear on a web page. It’s a shorthand property that consists of style properties for bottom, left, right, and top.
We can specify the border-style property with one, two, three, or all four values.
- If we use only one value, the property has the effect of applying the same style to all border lines.
-
When we use two values, the first style is applied to the top and bottom of the border, while the second style is applied to the left and right portions of the border.
-
When three values are specified, the first style is applied to the top, the second style is applied to the left and right sections, and the last style is applied to the bottom.
-
If we specify all four values, the order in which styles are applied will be top, right, bottom, and left (i.e., clockwise from the top).
Now let’s look at the possible values for this property.
- None
- Hidden
- Dotted
- Dashed
- Solid
- Double
- Groove
- Ridge
- Inset
- Outset
After exploring these values, we can see that we can achieve a double border effect by using “double” as the value of the border-style property.
Example
Below is an example of using the border-style property to specify a double border.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: beige;
text-align: center;
}
h1.doubleApplied {
border-width: 5px;
border-style: double;
Border-color: blue;
}
h1.double2Applied {
border-width: 15px;
border-style: double;
Border-color: blue;
}
h1.double3Applied {
border-width: 20px;
border-style: double;
Border-color: blue
}
</style>
</head>
<body>
<h1 class="doubleApplied">This has double styled border with thinnest <h1 class="double2Applied">This has a double-styled border applied with a slightly thicker border than the previous box.</h1>
<h1 class="double3Applied">This has a double-styled border applied with the thickest border.</h1>
</body>
</html>
As we can see, by using double as the value, all elements have a double border of varying thickness.
Conclusion
In summary, specifying double borders with CSS is a simple task. All you need to do is use the border-style property and set it to double. This will draw two lines along each side of the element, giving your page a unique and stylish look. Furthermore, you can use additional properties like “border-width” and “border-color” to customize the color, size, and other properties of these borders. With practice, you’ll soon be creating stunning designs with borders.