Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify double border using CSS?
We know that CSS is a rule based, style sheet language that is used for designing and customizing the web page. They are used to specify how an html element is going to be formatted and displayed on the screen. One of the most common forms of styling that we add to elements is adding or modifying the border of an element. This can be done by using the ‘border property’ of CSS.
Border Property
“border” is the abbreviated way to specify the border around an element by specifying the border width, its style, and the color of border. So, we can say that the border property actually consists of following three properties.
Border-color − it sets the color of the border and fallbacks to current color if absent.
Border-style − it specifies the style of border being used and fallbacks to none if absent.
Border-width − this determines the thickness of the border and has the default value of “medium”
We can also individually specify the width, style, and color of each side of the border. Please note that, it is not an inheritable property which means, if a container element has a border around it, the child elements will not have a border unless specified.
we can specify border with one, two, or all three properties. Any value that we do not specify will have its default / initial value as its value.
Example
An example of using border with all three properties is given below.
<!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 border</div>
</body>
</html>
We can see that each form of styling had a different effect on the border of the element.
Specifying double border
Now that we know the basics of using the border property in CSS, we will begin our approach to solve the problem of “How to specify double border using CSS”. Let us briefly understand what the border-style property is, what can be done using that property, and how we can use it to solve our problem.
Specifying the double border property
We have already discussed above that, border-style property controls the style of the border being applied to an element in CSS. The border-style property is used to control the way border-line will be displayed on the web page. This is also a shorthand property and consists of bottom, left, right, and top style properties.
We can specify the border-style property with one, two, three, or all four values.
If we only use one value, then the property has the effect of applying the same styling to all the border lines.
When we use two values, then the first style gets applied to the top and bottom parts of the border, while the second style gets applied to the left and right parts of the border.
On specifying three values, the first style gets applied to the top part, the second part styles both the left and right parts, and the last style gets applied to bottom one.
If we specify all four values then the order of application of style will be top, right, bottom, and left (i.e., clockwise from top).
Let us now look at what are the possible values which can be given to this property.
None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
After looking into each of these values, we can see that, we can achieve the effect of a double border by using “double” as value for the border-style property.
Example
An example of using the border-style property to specify double border is given below.
<!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 border</h1>
<h1 class="double2Applied">This has double styled border applied with slightly thick border than previous box.</h1>
<h1 class="double3Applied">This has double styled border applied with the thickest border</h1>
</body>
</html>
We can see that, by using double as the value, all the elements have a double border around them with varying thickness.
Conclusion
To conclude, specifying a double border 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. Additionally, you can customize the color, size, and other properties of these borders using additional properties such as "border-width", "border-color". With practice, you'll be creating stunning designs with borders in no time.
478 Views
