CSS right Property

The CSS right property mainly affects the horizontal position of the element as well as CSS property does not affect non-positioned elements.

Syntax:

right: auto|length|initial|inherit;

Property values:

auto: This is a default property in which the browser will calculate the right edge position.

Syntax:

right:auto;

Example-1:

html

<!Doctype html>
<html>

<head>
    <title>
        CSS | right Property
    </title>
    <style>
        div.geek {
            position: relative;
            width: 300px;
            height: 200px;
            border: 3px solid green;
        }
        
        div.geeks {
            position: absolute;
            <!-- "auto" right property--> 
            right: auto;
            width: 100px;
            height: 120px;
            border: 3px solid green;
        }
    </style>
</head>

<body>

    <h1>CSS right Property</h1>

    <div class="geek">
      Geek For Geeks(here position of element is relative)
    <div class="geeks">
      Geek For Geeks
     (here position of element is absolute and element)
    </div></div>

</body>

</html>

Output:

length: Length help to set the right edge position of element in px, cm. It should always have positive value.

Syntax:

right:length;

Example-2:

html

<!Doctype html>
<html>

<head>
    <title>
        CSS | right Property
    </title>
    <style>
        div.geek {
            position: relative;
            width: 300px;
            height: 200px;
            border: 3px solid green;
        }
        
        div.geeks {
            position: absolute;
            <!-- "length" right property>
            right: 0px;
            width: 100px;
            height: 120px;
            border: 3px solid green;
        }
    </style>
</head>

<body>

    <h1>CSS right Property</h1>

    <div class="geek">
      Geek For Geeks(here position of element is relative)
      <div class="geeks">
        Geek For Geeks
        (here position of element is absolute and element)
      </div>
     </div>

</body>

</html>

Output:

initial: Initial keyword is used to set default value of CSS property.

Syntax:

right:initial;

Example-3:

html

<!Doctype html>
<html>

<head>
    <title>
        CSS | right Property
    </title>
    <style>
        div.geek {
            position: relative;
            width: 300px;
            height: 200px;
            border: 3px solid green;
        }
        
        div.geeks {
            position: absolute;
            <!--"initial" right property--> 
            right: initial;
            width: 100px;
            height: 120px;
            border: 3px solid green;
        }
    </style>
</head>

<body>

    <h1>CSS right Property</h1>

    <div class="geek">
      Geek For Geeks(here position of element is relative)
      <div class="geeks">
        Geek For Geeks
        (here position of element is absolute and element)
     </div>
  </div>

</body>

</html>

Output:

inherit: Inherit keyword is also used to set default value of CSS property.Here default value is the set value of previous element.

Syntax:

right:inherit;

Example-4:

html

<!Doctype html>
<html>

<head>
    <title>
        CSS | right Property
    </title>
    <style>
        div.geek {
            position: relative;
            width: 300px;
            height: 200px;
            border: 3px solid green;
        }
        
        div.geeks {
            position: absolute;
            <!--"inherit" right property>
            right: inherit;
            width: 100px;
            height: 120px;
            border: 3px solid green;
        }
    </style>
</head>

<body>

    <h1>CSS right Property</h1>

    <div class="geek">
      Geek For Geeks(here position of element is relative)
      <div class="geeks">
        Geek For Geeks
        (here position of element is absolute and element)
    </div>
  </div>

</body>

</html>

Output:

Supported Browsers: The supported browsers by right Property are listed below:

Google Chrome 1.0
Edge 12
Firefox 1.0
Internet Explorer 5.5
Opera 5.0
Safari 1.0

Explore