What is border-right and border-bottom-width Property
CSS: border-right property
The border-right Property is a shorthand property used for all the three properties that are given below-
- border-right-width
- border-right-style(if required)
- border-right-color
Description
The CSS border-right property defines the width, line style, and color of the right border of a box. It is a shorthand property for setting the border-right-width, border-right-style, and border-right-color properties.
Syntax:
border-right: border-width border-style border-color
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right Property
</title>
<style>
h1 {
border-right:5px solid red;
}
h2 {
border-right: 4px dotted blue;
}
div {
border-right: double;
}
</style>
</head>
<body>
<h1>A heading with a solid red right border</h1>
<h2>A heading with a dotted blue right border</h2>
<div>A div element with a double right border.</div>
</body>
</html>
initial: It sets the property to its default value.
Syntax:
border-right:initial;
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
h3 {
border-right: initial;
width:20%;
}
div {
border-right: initial;
width:40%;
}
</style>
</head>
<body>
<center>
<h1>CodeOne</h1>
<h2>CSS Border-right Property</h2>
<h3>CodeOne</h3>
<div>It is a computer science portal for CodeOne.</div>
</body>
</html>
Output:
CSS border-bottom-width Property
The border-bottom-width property in CSS is used to set a specific width to the bottom border of an element. The border-bottom-style or border-style property is used for the element before using the border-bottom-width property.
Syntax:
border-bottom-width: length|thin|medium|thick|initial|inherit;
Property Values: The border-width property values are listed below:
- thin: It is used to set the thin border of the bottom.
- medium: It is used to set medium sized bottom border. It is the default value.
- thick: It is used to set thick bottom border.
- length: It is used to set the width of the border. It does not takes negative value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
border-bottom-width property
</title>
<style>
#thin {
border-color: red;
border-bottom-style: solid;
border-bottom-width: thin;
}
#medium {
border-color: red;
border-bottom-style: solid;
border-bottom-width: medium;
}
#thick {
border-color: red;
border-bottom-style: solid;
border-bottom-width: thick;
}
#length {
border-color: red;
border-bottom-style: solid;
border-bottom-width: 20px;
}
</style>
</head>
<body style = "text-align:center">
<h1 style = "color:red">CodeOne</h1>
<h3>border-bottom-width property</h3>
<div id="thin">
border-bottom-width: thin;
</div><br><br>
<div id="medium">
border-bottom-width: medium;
</div><br><br>
<div id="thick">
border-bottom-width: thick;
</div><br><br>
<div id="length">
border-bottom-width: length;
</div>
</body>
</html>
Output:
