Shorthand to set the 3 properties:

element { border-right: Border-right-width Border-right-style Border-right-color ;}

This shorthand is equivalent to the following:

element {
  border-right-width: thin | medium | thick | length | inherit ;
  border-right-style: style ;
  border-right-color: color ;

Alternatively you can choose to inherit from a parent element: border-right: inherit ;

The Border-Style property must be set for the Border-Width or Border-Color properties to have any effect.

The default property values, any value that is not specified in the shorthand will be set to the default.

  border-right-width: medium;
  border-right-style: none;
  border-right-color: 0;


Set the right border of H1 to a 2px dashed green line:

h1 {border-right: 2px dashed green;}

Set a large right border on a 0px element to create a left pointing triangle:

.left-arr {
 width: 0px;
 height: 0px;
 border-bottom: 20px solid transparent;
 border-top: 20px solid transparent;
 border-right: 20px solid black;

Try it:

This is a sample of text with a CSS border. Each of the 4 borders can be styled separately with CSS.

Browser Support: All major browsers (CSS 1)

“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart


border-right - MDN Web Docs.
border-bottom - Shorthand to set all the border-bottom properties.
border-left - Shorthand to set all the border-left properties.
border-top - Shorthand to set all the border-top properties.
border - Shorthand to set all the border properties.

Copyright © 2013-2022
Some rights reserved