totn CSS

CSS: border-right-width property

This CSS tutorial explains how to use the CSS property called border-right-width with syntax and examples.

Description

The CSS border-right-width property defines the width of the right border of a box.

Syntax

The syntax for the border-right-width CSS property is:

border-right-width: value;

Parameters or Arguments

value

The width of the right border of a box. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { border-right-width: 5px; }
thin Thin border width, which might be 1px or 2px depending on the browser
div { border-right-width: thin; }
medium Medium border width, which might be 3px or 4px depending on the browser
div { border-right-width: medium; }
thick Thick border width, which might be 5px or 6px depending on the browser
div { border-right-width: thick; }

Note

Browser Compatibility

The CSS border-right-width property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-right-width property below, exploring examples of how to use this property in CSS.

Let's look at an example where we set the right border to a fixed width.

div { border-right-width: 0.2em; border-right-style: solid; }

In this CSS border-right-style example, we have set the width of the right border to 0.2em. Be sure to apply a border-right-style so that the border appears.

Next, let's try using one of the width keywords (thin, medium, thick) to set our right border width.

div { border-right-width: medium; border-right-style: solid; }

In this border-right-style example, we have set the right border to a medium line.