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

CSS border-box Value

CSS Web Development Front End Technology

The CSS background-origin property with the border-box value specifies that the background image should start from the upper left corner of the border area. This allows the background to extend under the border, creating a unique visual effect where the background is visible through transparent or partially transparent borders.

Syntax

selector {
    background-origin: border-box;
}

Example: Comparing Background Origin Values

The following example demonstrates the difference between padding-box, border-box, and content-box values −

<!DOCTYPE html>
<html>
<head>
<style>
    .demo-box {
        width: 300px;
        height: 150px;
        border: 10px dashed #333;
        padding: 20px;
        margin: 20px 0;
        background: url(/css/images/logo.png);
        background-repeat: no-repeat;
        background-size: 100px 60px;
    }
    
    .padding-box {
        background-origin: padding-box;
    }
    
    .border-box {
        background-origin: border-box;
    }
    
    .content-box {
        background-origin: content-box;
    }
</style>
</head>
<body>
    <h3>padding-box value</h3>
    <div class="demo-box padding-box">
        <p>Background starts from padding area</p>
    </div>
    
    <h3>border-box value</h3>
    <div class="demo-box border-box">
        <p>Background starts from border area</p>
    </div>
    
    <h3>content-box value</h3>
    <div class="demo-box content-box">
        <p>Background starts from content area</p>
    </div>
</body>
</html>

Three boxes with dashed borders are displayed:
1. padding-box: Background image starts from the padding area (default behavior)
2. border-box: Background image starts from behind the border area
3. content-box: Background image starts only from the content area

Key Points

When using border-box value:

  • The background image positioning starts from the border edge
  • Background is visible through transparent or dashed borders
  • Most useful when combined with transparent or partially transparent borders
  • Different from the default padding-box behavior

Conclusion

The border-box value for background-origin allows backgrounds to extend under borders, creating interesting visual effects. It's particularly useful when working with transparent or dashed borders where you want the background to show through.

Updated on: 2026-03-15T12:42:52+05:30

331 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements