Skip to content
Related Articles

Related Articles

CSS | right Property

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

The css right property mainly affects the horizontal position of element as well as css property has no effect on non-positioned elements. 

Syntax:

right: auto|length|initial|inherit;

Property values:

  • auto: This is a default property in which 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!