CSS inset-inline-end Property

The CSS inset-inline-end property sets the logical offset of a positioned element from the inline-end edge of its containing block.

Positions an element relative to the inline-end edge.
Adapts automatically to different writing modes and text directions.
Accepts values like length, percentage, auto, inherit, initial, and unset.

Syntax:

inset-inline-end: length | percentage | auto | inherit | initial | unset;

Property values

length: Sets a fixed offset using units like px, cm, or pt. Negative values are allowed.
percentage: Sets the offset as a percentage of the containing block's size.
auto: Lets the browser calculate the inline-end offset automatically.
initial: Sets the property to its default value.
inherit: Inherits the inset-inline-end value from the parent element.
unset: Resets the property to its inherited or initial value, depending on the property's behavior.

Examples of inset-inline-end Property

Below examples illustrate the inset-inline-end property in CSS:

Example 1: The inset-inline-end property positions the green box slightly outside the inline-end (right) edge of the cyan container.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS inset-inline-end Property</title>
<!--Driver Code Ends-->

    <style>
        body {
            background: #dcdcdc;
            font-family: "Times New Roman", serif;
        }

        h1 {
            color: green;
            text-align: center;
            margin-bottom: 20px;
            font-size: 34px;
        }

        h2 {
            text-align: center;
            font-size: 22px;
            margin-bottom: 35px;
        }

        .container {
            position: relative;
            width: 200px;
            height: 38px;
            background: #24e5e5;
            margin: auto;
        }

        .box {
            position: absolute;
            inset-inline-end: -10px;
            top: 0;
            width: 12px;
            height: 22px;
            background: green;
        }

        .container p {
            margin: 0;
            text-align: center;
            font-size: 18px;
            line-height: 19px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>

    <h1>GeeksforGeeks</h1>

    <h2>CSS | inset-inline-end Property</h2>

    <div class="container">
        <div class="box"></div>
        <p>
            A Computer Science<br>
            Portal for Geeks
        </p>
    </div>

</body>

</html>
<!--Driver Code Ends-->

Example 2: The inset-inline-end property positions the cyan element relative to the inline-end edge of the green container, causing it to extend outside the container.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset-inline-end Property</title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }
        
        div {
            background-color: green;
            width: 200px;
            height: 120px;
        }
        
        .one {
            writing-mode: vertical-rl;
            position: relative;
            inset-inline-end: 50px;
            background-color: cyan;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset-inline-end Property</b>
        <br>
        <br>
        <div>
            <p class="one">
                A Computer Science Portal for Geeks
            </p>
        </div>
    </center>
</body>
</html>                    
<!--Driver Code Ends-->

CSS inset-inline-end Property

Property values

Examples of inset-inline-end Property

Explore