CSS border shorthand property:-
As you noticed in the previous web page, there are numerous properties to recall while handling borders.
To shorten the code, it's also possible to specify all the individual border houses in one property.
The border belongings is a shorthand belonging for the subsequent person border properties:
- border-style (required)
- border-color
- border-width
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 4px solid gray;}
</style>
</head>
<body>
<h1> The Border Property </h1>
<p> This is the shorthand property for border style, border width, and border color. </p>
</body>
</html>
Try this code for a better experience
You can specify all the individual border properties for just one side:
Left Border:-
The given example is for the left border.
<!DOCTYPE html>
<html>
<head>
<style>
p {border-left: 5px solid red;
background-color: gray;
}
</style>
</head>
<body>
<h1> The Border Left Property </h1>
<p> This is the shorthand property for border-left-color, border-left-width, and border-left-style. <p>
</body>
</html>
Try this code for a better experience
Bottom Border:-
The given example is for the bottom border.
<!DOCTYPE html>
<html>
<head>
<style>
p {border-bottom: 5px solid red;
background-color: gray;
}
</style>
</head>
<body>
<h1> The Border Bottom Property </h1>
<p> This is the shorthand property for border-bottom-color, border-bottom-width, and border-bottom-style. <p>
</body>
</html>
Try this code for a better experience
Right Border:-
The given example is for the right border.
<!DOCTYPE html>
<html>
<head>
<style>
p {border-right: 5px solid red;
background-color: gray;
}
</style>
</head>
<body>
<h1> The Border Right Property </h1>
<p> This is the shorthand property for border-right-color, border-right-width, and border-right-style. <p>
</body>
</html>
Try this code for a better experience
Top Border:-
The given example is for the right border.
<!DOCTYPE html>
<html>
<head>
<style>
p {border-top: 5px solid red;
background-color: gray;
}
</style>
</head>
<body>
<h1> The Border Right Property </h1>
<p> This is the shorthand property for border-top-color, border-top-width, and border-top-style. <p>
</body>
</html>
Try this code for a better experience
0 Comments