How to create a 3D outset and inset border using CSS ?

Last Updated : 11 May, 2023

In this article, we will create a 3D outset and inset border using CSS. The Inset border property makes the content appear embedded (inside the surface) and on the other hand, the outset property makes the content appear embossed (outside the surface). You can achieve this task by using the border-style property that is used to decorate the border.

3D inset border: It is used to define a 3D inset border and its effect depends on the border-color value.

Syntax:

element_name(or selector).inset {border-style: inset;}

Example 1: Here is the basic example of our above method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
 
        p {
            font-size: 30px;
            margin-top: -50px;
        }
 
        p.inset {
            border-style: inset;
 
            /* Inset style property */
            font-size: 40px;
            margin-top: 30px;
        }
 
        h2 {
            color: green;
            font-size: 50px;
        }
    </style>
</head>
 
<body>
    <h2>GeeksForGeeks</h2>
    <p>A computer science portal for geeks</p>
    <p class="inset">
        The content of this paragraph is
        styled using inset property
    </p>
 
</body>
</html>

Output:

3D outset border: It is used to define a 3D outset border and its effect depends on the border-color value.

Syntax:

element_name(or selector).outset {border-style: outset;}

Example 2: In this example, we are using the above-explained method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
 
        p {
            font-size: 30px;
            margin-top: -50px;
        }
 
        p.outset {
            border-style: outset;
 
            /* outset style property */
            font-size: 40px;
            margin-top: 30px;
        }
 
        h2 {
            color: green;
            font-size: 50px;
        }
    </style>
</head>
 
<body>
    <h2>GeeksForGeeks</h2>
    <p>A computer science portal for geeks</p>
    <p class="outset">
        The content of this paragraph is
        styled using outset property
    </p>
 
</body>
</html>