How to specify the double border using CSS ?
Last Updated :
05 Jun, 2023
The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS.
Property used:
Syntax:
border-style: value;
Approach:
- Create the HTML page with some elements.
- Now, using the border-style property style the border with value double.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
< html >
< head >
< style type = "text/css" >
body {
text-align: center;
}
h1.double {
border-width: 5px;
border-style: double;
Border-color: green
}
h1.double2 {
border-width: 10px;
border-style: double;
Border-color: green
}
h1.double3 {
border-width: 15px;
border-style: double;
Border-color: green
}
</ style >
</ head >
< body >
< h1 class = "double" >GeeksForGeeks</ h1 >
< h1 class = "double2" >GeeksForGeeks</ h1 >
< h1 class = "double3" >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Approach 2: Outline-property: The CSS outline property is used to set an outline around an element.
Syntax:
outline-style: value;
Example: here we are using the above method.
HTML
<!DOCTYPE html>
< html >
< head >
< style type = "text/css" >
body {
text-align: center;
}
.container {
width: 50%;
margin-left: 20px;
}
h1.double {
outline: 5px double red;
}
h1.double2 {
outline: 5px double green;
}
h1.double3 {
outline: 5px double orange;
}
</ style >
</ head >
< body >
< div class = "container" >
< h1 class = "double" >GeeksForGeeks</ h1 >
< h1 class = "double2" >GeeksForGeeks</ h1 >
< h1 class = "double3" >GeeksForGeeks</ h1 >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...