border-right-width

Definition

The border-right-width property sets the width of the right border of an element. The width can be set in length units (e.g. pixels, ems, rems), or by using one of the following keywords:

• "thin"
• "medium"
• "thick"

By default, the width is "medium", but the actual width of a "medium" border can vary depending on the browser or operating system.

Examples

Set the right border width of an element to 5 pixels:

border-right-width: 5px;

Set the right border width of an element to a thin line:

border-right-width: thin;

Set the right border width of an element to a thick line:

border-right-width: thick;

Set the width of all four borders of an element to 10 pixels:

border-width: 10px; /* applies to all four borders */

Set the width of all four borders of an element to different values:

border-width: 2px 5px 1px 4px; /* top right bottom left order */

Set the width of the right border of an element to 3em:

border-right-width: 3em;

Use a class to change the right border width of an element on hover:

.example {
    border-right-width: 2px;
}
.example:hover {
    border-right-width: 5px;
}

Use an id to change the width of all borders of a specific element:

#myid {
    border-width: 10px;
}

Values

Best Practices

• Use relative length units (e.g. em, rem) instead of fixed units (e.g. pixels) so that the border width adjusts automatically when the font size changes. This ensures that the border width will be consistent across different screen sizes and devices.
• Use the border-width shorthand property to set the width of all four borders of an element at once, rather than using each individual property (border-top-width, border-right-width, border-bottom-width, border-left-width)
• When using the border-width shorthand property, be careful of the order in which the values are set. The order is "top right bottom left" and if you not set the value on a specific position, it will take the value of the previously set value.
• Use class and id selectors for different border styles, rather than using the !important keyword. This makes it easier to change the styles later on, and also keeps your code more organized.
• Avoid using the border-right-width property with border-right-style set to none. This will produce an unexpected behavior, because none value will nullify all other values of the border.
• As a general rule, don't forget to test your design with different browser and devices to make sure that the right border width looks consistent across different platforms.
• If you are working with multiple different designs and you want to optimize your code. you can use some CSS preprocessor like SASS or LESS to define variable and re-use it through your css file.
• By following Web Content Accessibility Guidelines(WCAG) it is important to make sure the border-width is visible and distinguishable to users with low vision, color blindness or other disabilities.

Browser Compatibility