Open In App

CSS border-right-style Property

Improve
Improve
Like Article
Like
Save
Share
Report

The border-right-style property in CSS is used to change the appearance of the right line segment of the border of an element. 

Default Value: none

Syntax:  

border-right-style: none|hidden|dotted|dashed|solid|double|groove|
ridge|inset|outset|inherit; 

Property Values: 

  • none: It is the default value and it makes the width of right border to zero. Hence, it is not visible. 
  • hidden: It is used to make right border invisible, like none, except in case of border conflict resolution of table elements. 
  • dotted: It is used to make the right border with a series of dots.
  • dashed: It makes the right border with a series of short line segments. 
  • solid: It is used to make the right border with a single solid line segment. 
  • double: This property makes the right border with a double solid line. The border width, in this case, is equal to the sum of widths of the two-line segments and the space between them. 
  • groove: It makes the right border with a grooved line segment, which makes us feel that it is going inside. 
  • inset: It makes the right border with an embedded line segment, which makes us feel that it is fixed deeply on the screen. 
  • outset: It is opposite of inset. It makes the right border with a line segment, which appears to be coming out.
  • inherit: It makes the right-border-style property to be inherited from its parent element. 

Example: In this example, we are using the border-right-style: none property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property for border-right-style */
            border-right-style: none;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:none; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-none

Example: In this example, we are using border-right-style: hidden property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property for border-right-style */
            border-right-style: hidden;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:hidden; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-hidden

Example: In this example, we are using border-right-style: dotted; property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property for border-right-style */
            border-right-style: dotted;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:dotted; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-dotted

Example: In this example, we are using border-right-style: dashed property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property for border-right-style */
            border-right-style: dashed;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:dashed; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-dashed

Example: In this example, we are using border-right-style: solid property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property for border-right-style */
            border-right-style: solid;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:solid; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-solid

Example: In this example, we are using border-right-style: double property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property for border-right-style */
            border-right-style: double;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:double; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-double

Example: In this example, we are using border-right-style: groove; property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            border: 10px;
            border-style: solid;
 
            /* CSS Property for border-right-style */
            border-right-style: groove;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:groove; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-groove

Example: In this example, we are using border-right-style: inset; property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            border: 10px;
            border-style: solid;
 
            /* CSS Property for border-right-style */
            border-right-style: inset;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:inset; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-inset

Example: In this example, we are using border-right-style: outset property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            border: 10px;
            border-style: solid;
 
            /* CSS Property for border-right-style */
            border-right-style: outset;
        }
    </style>
 
</head>
 
<body>
    <!-- border-right-style:outset; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-outset

Example: In this example, we are using border-right-style: inherit; property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS border-right-style Property
    </title>
 
    <!-- Internal CSS Style Sheet -->
    <style>
        body {
            border-right-style: dashed;
        }
 
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
 
            /* CSS Property | border-right-style */
            border-right-style: inherit;
        }
    </style>
</head>
 
<body>
    <!-- border-right-style: inherit; -->
    <h1>GeeksForGeeks</h1>
</body>
 
</html>


Output: 

CSS | Property | border-right-style-inherit

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

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


Last Updated : 30 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads