Skip to content
Related Articles

Related Articles

CSS | border-right Property

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Jun, 2022
View Discussion
Improve Article
Save Article

The border-right Property is a shorthand property used for all the three Properties that are given below-

  • border-right-width
  • border-right-style(if required)
  • border-right-color

Syntax:

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

Property Values: border-width border-style border-color:It is used to sets the width, style, color of a Element’s Border.

  • Syntax:
border-right: border-width border-style border-color 
  • Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | border-right Property
    </title>
    <style>
        h1 {
            border-right: 5px solid red;
        }
         
        h2 {
            border-right: 4px dotted blue;
        }
         
        div {
            border-right: double;
        }
    </style>
</head>
 
<body>
 
    <h1>A heading with a solid red right border</h1>
 
    <h2>A heading with a dotted blue right border</h2>
 
    <div>A div element with a double right border.</div>
 
</body>
 
</html>

  • Output:

 

initial:It sets the property to its default value.

  • Syntax:
border-right:initial;
  • Example: 

html




<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color:green;
}
 
h3 {
  border-right: initial;
  width:20%;
}
 
div {
  border-right: initial;
  width:40%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2> CSS Border-right Property</h2>
<h3>geeksforgeeks</h3>
 
<div>It is a computer science portal for geeks.</div>
 
</body>
</html>

  • Output:

 

Supported Browsers: The browser supported by css border-right property are listed below:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Opera 9.2
  • Apple Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!