Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS border-right

The border-right property adds a right border to an element.

Borders can vary in width, line style, and color.

Example

#

Three different border-right styles.

3px solid steelblue border
5px double lightblue border
3px dashed red border
<style>
  .mydiv {
    padding: 15px;
    margin: 15px 0;
    width: 300px;
  }
</style>

<div class="mydiv" style="border-right: 3px solid steelblue">
  3px solid steelblue border
</div>
<div class="mydiv" style="border-right: 5px double lightblue">
  5px double lightblue border
</div>
<div class="mydiv" style="border-right: 3px dashed red">
  3px dashed red border
</div>

Using border-right

The border-right property is a shorthand for:

If border-right-color is not set, it will inherit the text's color.

If border-right-width is not set, it will default to medium or 1px.

Syntax

border-right: border-width border-style border-color | 
              initial | inherit;

Values

#

Value Description
border-width Border width. Default is medium (1px).
border-style Border style. Default is none.
border-color Border color. Default will inherit text color.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when border-right support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides