CSS margin-right and border-right color propertys
The border-right-color property defines the color of the right border of an element.
The right border color, combined with top, right, and bottom border colors, can also be defined with the border-color shorthand property.
If you use the border-right-color property, you should first set the border-style or border-right-style properties and then change the color of the defined style.
The default width of a border is medium. You can specify the width using either the border-width or border-right-width properties.
CSS margin-right Property
The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of margin-right property is zero.
Syntax:
margin-right: length|auto|initial|inherit;
Property Value:
- Length: This property is used to set a fixed value defined in px, cm, pt etc. The negative value is allowed and the default value of 0px.
Syntax:
margin-right:length;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
margin-right-property
</title>
<!- - margin-right property - ->
<style>
h1 {
margin-right"100px;
border:1px solid black;
}
h2 {
margin-right:250px;
border:1px solid black;
}
</style>
</head>
<body style = "text-align:center">
<h1>CodeOne</h1>
<h2>margin-right property</h2>
</body>
</html>
Output:
CSS border-right-color Property
The border-right-color Property is used to set the color of the right-border in an Element. It is mandatory to declare the border-style or the border-left-style property before the border-right-color property.
Syntax:
border-right-color: color|transparent|initial|inherit;
Property Values
Color: It sets the color of the Element’s right-border.
- Syntax:
border-right-color: color;
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-color Property
</title>
<style>
h1 {
color: red;
}
h3 {
border: 2px solid red;
border-right-color: red;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1> CodeOne</h1>
<h2>border-right-color:color;</h2>
<h3>CodeOne</h3>
<p style="border-style:dotted;
border-right-color:coral;
width: 70%;">
It is a computer science portal for CodeOne.</p>
</body>
</html>
Output:
