What is CSS-border-bottom and border-right-width property
CSS border-bottom Property
Example
Set the style of the bottom border for different elements.
h1 {
border-bottom: 5px solid red;
}
h2 {
border-bottom: 4px dotted blue;
}
div {
border-bottom: double;
}
Definition and Usage
The border-bottom property is a shorthand property for (in the following order):
- border-bottom-width
- border-bottom-style
- border-bottom-color
If border-bottom -color is omitted, the color applied will be the color of the text.
CSS border-right-width Property
The border-right-width property in CSS is used to set the width of right-border of an element. It is mandatory to declare the border-style or the border-right-style property before the border-right-width property.
Default Value:
- medium
Syntax:
border-right-width:medium|thin|thick|length|initial|inherit;
Property Values:
medium: It is the default value. It is used to specify a medium size of right-border.
- Syntax
border-right-width: medium;
- Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid red;
border-right-width: medium;
width:50%;
}
p {
border-style:dotted;
border-right-width:medium;
width:70%
}
</style>
</head>
<body>
<center>
<h1 style = "color:red">
CodeOne
</h1>
<h2>border-right-width:initial;</h2>
<!-- border-right-width property
used here -->
<h3>CodeOne</h3>
<!-- border-right-width property
used here -->
<p>
It is a computer science portal for CodeOne.
</p>
</center>
</body>
</html>
Output:
thin: This property is used to set the width of right border as thin.
- Syntax:
border-right-width: thin;
- Example
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid red;
border-right-widht: thin;
width:50%;
}
p {
border-style:dotted;
border-right-width:thin;
width:70%;
}
</style>
</head>
<body>
<center>
<h1 style = "color:red">
CodeOne
</h1>
<h2>border-right-widht:thin;</h2>
<!-- border-right-width property
used here -->
<h3>CodeOne</h3>
<!-- border-right-width property
used here -->
<p>
It is a computer science portal for CodeOne.
</p>
</center>
</body>
</html>
Output
thick: This property is used to specify a thick right-border of an element.
- Syntax:
border-right-width: thick;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid red;
border-right-width: thick;
width:50%;
}
p {
border-stylle:dotted;
border-right-width:thick;
width:70%;
}
</style>
</head>
<body>
<center>
<h1 style = "color:red">
CodeOne
</h1>
<h2>border-right-width:thick; </h2>
<!-- border-right-width Property
used here -->
<h3>CodeOne</h3>
<!-- border-right-width property
used here -->
<p>
It is a computer science portal for CodeOne.
</p>
</center>
</body>
</html>
Output:
initial: It is used to set border-right-width property to its default value.
- Syntax
border-right-width: initial;
Example
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid red;
border-right-width: initial;
width:50%;
}
p {
border-style:dotted;
border-right-width:initial;
width:70%;
}
</style>
</head>
<body>
<center>
<h1 style = "color:red">
CodeOne
</h1>
<h2>border-right-width:initial;</h2>
<!-- border-right-width Property
used here -->
<h3>CodeOne</h3>
<!-- border-right-width property
used here -->
<p>
It is a computer science portal for CodeOne.
</p>
</center>
</body>
</html>
Output:
