border-right
Anonymous contributor
Published Jun 28, 2021Updated Oct 20, 2023
Contribute to Docs
Shorthand property that defines the width, color, and style of the right border of an element.
Syntax
border-right: <value>;
By default, border-right
will have a style of none
and a width of medium
.
The default color is the value of the color
property or text color.
<value>
can be one of the following:
border-style
changes the shape or design of the border to one of the 10 available styles.border-width
changes the thickness of the border.border-color
changes the border color.
Note: values can be provided in any order.
Example 1
Set the right border of the h1
element to be green, 3 pixels thick, and dotted:
h1 {width: fit-content;border-right: green 3px dotted;}
Example 2
Set the right border of the h1
element to be 4 pixels thick, dashed, and blue:
h1 {width: fit-content;border-right: 4px dashed #0000ff;}
Example 3
Set the right border of the h1
element to be solid and black. Since a width is
not specified, it will default to medium
.
h1 {width: fit-content;border-right: rgb(0, 0, 0) solid;}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours