Article Categories

Selected Reading

Set Outset border with CSS

Javascript Web Development Front End Scripts

To set an outset border with CSS, use the border-style property with the value outset. An outset border creates a 3D effect that makes the element appear raised or protruding from the page.

Syntax

border-style: outset;
/* Or combine with width and color */
border: width outset color;

Example

<html>
  <head>
    <title>Outset Border Example</title>
  </head>
  <body>
    <p style="border-width: 4px; border-style: none; padding: 10px; margin: 10px;">
      This paragraph has no border.
    </p>
    <p style="border-width: 4px; border-style: outset; padding: 10px; margin: 10px;">
      This paragraph has an outset border that appears raised.
    </p>
    <p style="border: 6px outset #ff6b6b; padding: 15px; margin: 10px;">
      This paragraph has a colored outset border.
    </p>
  </body>
</html>

How Outset Borders Work

Outset borders create a 3D effect by using different shades:

The top and left edges appear lighter (highlighted)
The bottom and right edges appear darker (shadowed)
This creates the illusion that the element is raised above the page

Comparison with Other Border Styles

Border Style	Visual Effect	Use Case
`outset`	Raised, 3D appearance	Buttons, highlighted sections
`inset`	Pressed, recessed appearance	Input fields, pressed buttons
`solid`	Flat, solid line	General borders

Conclusion

The outset border style creates a 3D raised effect that's perfect for making elements appear prominent. Combine it with appropriate colors and widths to enhance your page's visual hierarchy.

Samual Sam

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

541 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next