Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 21 May, 2021

In this article, we will create a 3D outset and inset border using CSS. 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:

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:

 

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :