Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set Inset border with CSS

Javascript Web Development Front End Scripts

To set inset border with CSS, use the border-style property with value inset. The inset border style creates a 3D effect that makes the element appear pressed into the page.

Syntax

border-style: inset;
/* or for specific sides */
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .no-border {
            border-width: 4px;
            border-style: none;
            padding: 10px;
            margin: 10px 0;
        }
        
        .inset-border {
            border-width: 4px;
            border-style: inset;
            padding: 10px;
            margin: 10px 0;
            border-color: #888;
        }
        
        .inset-thick {
            border-width: 8px;
            border-style: inset;
            border-color: #666;
            padding: 15px;
            margin: 10px 0;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <p class="no-border">
        This paragraph has no border (border-style: none).
    </p>
    
    <p class="inset-border">
        This paragraph has an inset border - notice the 3D pressed-in effect.
    </p>
    
    <p class="inset-thick">
        This paragraph has a thicker inset border with background color.
    </p>
</body>
</html>

Key Points

  • The inset border style creates a 3D sunken appearance
  • It works best with a border width of at least 2-3 pixels to show the effect clearly
  • The effect is opposite to outset border style
  • Border color affects how pronounced the 3D effect appears

Browser Compatibility

The inset border style is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

Conclusion

Use border-style: inset to create a pressed-in 3D effect. Combine with adequate border width and appropriate colors for the best visual result.

Updated on: 2026-03-15T23:18:59+05:30

960 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements