CSS Borders
The CSS border property is used to specify the element’s border. The border can be of any color and any type like (solid border, dotted border, dashed border, double border, hidden border, no border etc.)
Here is how we can specify the border of an element.
h1 {
border: 3px solid green;
}
h2 {
border: 4px dotted red;
}
p {
border: double;
}Now let’s put the same code in a below example to see the results:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px solid green;
}
h2 {
border: 4px dotted red;
}
p {
border: 5px double;
}
</style>
<body>
<h1>Hello Developers!</h1>
<h2>Let's learn about CSS borders</h2>
<p>CSS border property is used to specify the element's border</p>
</body>
</html>
NOTE:- The (number)px defines the width of the border.
Border Color
The CSS border-color property is used to set the color of the border.
The color can be set by using the:
- color name: like “green”.
- Hex value: like “#00ff00”
- RGB value: like “rgb(0, 2555, 0)”
- HSL value: like “hsl(25, 60%, 50%)”
In an example below let’s see how we can set the border color for any element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style:solid;
border-color:green;
}
h2 {
border-style:dotted;
border-color:rgb(0, 255, 0);
}
p {
border-style:dashed;
border-color: #00ff00;
}
</style>
<body>
<h1>Hello Developers!</h1>
<h2>Let's learn about CSS borders</h2>
<p>CSS border property is used to specify the element's border</p>
</body>
</html>
Note:- If the color of the border is not set, it automatically inherits the color of an element.
Different Border Sides
With the help of CSS we can also set different border styles for different sides. For example we can set one side of the border to be dotted, other side to be dashed and so on.
In an example below let’s see how we can do that.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top-style:solid;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:double;
}
h2 {
border-top-style:solid;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:double;
}
p {
border-top-style:solid;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:double;
}
</style>
<body>
<h1>Hello Developers!</h1>
<h2>Let's learn about CSS borders</h2>
<p>CSS border property is used to specify the element's border</p>
</body>
</html>
Similarly, we can also set the different border colors for different sides.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top-style:solid;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:double;
border-top-color:green;
border-right-color:yellow;
border-left-color:blue;
border-bottom-color:red;
}
h2 {
border-top-style:solid;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:double;
border-top-color:green;
border-right-color:yellow;
border-left-color:blue;
border-bottom-color:red;
}
p {
border-top-style:solid;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:double;
border-top-color:green;
border-right-color:yellow;
border-left-color:blue;
border-bottom-color:red;
}
</style>
<body>
<h1>Hello Developers!</h1>
<h2>Let's learn about CSS borders</h2>
<p>CSS border property is used to specify the element's border</p>
</body>
</html>
Shorthand
To shorten the code, we can also specify all the individual border properties in a one single property. Like this:
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<p>Hello Developers!</p>
</body>
</html>
