Skip to content

Instantly share code, notes, and snippets.

@softmarshmallow

softmarshmallow/css-border-overflow-outline-demo.html

Last active September 4, 2025 19:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save softmarshmallow/f5e2dc7f5df840f45387ef2abdd136f0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save softmarshmallow/f5e2dc7f5df840f45387ef2abdd136f0 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS demo comparing border with overflow:hidden (child clipped), border with overlapping children (border painted first, children on top), and outline (always painted last on top of content and neighbors).
Raw
css-border-overflow-outline-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border, Overflow and Outline Demos</title>
<style>
body {
background: #ddd;
color: white;
margin: 0;
padding: 40px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
line-height: 1.4;
}
.stage {
position: relative;
width: 520px;
height: 260px;
margin-bottom: 16px;
overflow: visible;
}
.backdrop {
position: absolute;
left: 20px;
top: 20px;
width: 300px;
height: 160px;
background: tomato;
z-index: 0;
}
/* --- demo 1 --- */
.box {
position: absolute;
left: 120px;
top: 60px;
width: 160px;
height: 100px;
padding: 16px;
border: 12px solid rgba(0, 0, 0, 0.3);
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
background-clip: padding-box;
z-index: 1;
box-sizing: border-box;
}
.child {
position: absolute;
left: 120px;
top: 60px;
width: 80px;
height: 80px;
background: #4aa3ff;
}
/* --- demo 2 --- */
.box2 {
position: absolute;
left: 120px;
top: 60px;
width: 200px;
height: 120px;
padding: 20px;
border: 12px solid rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.8);
z-index: 1;
}
.child-inside {
width: 80px;
height: 40px;
background: lightgreen;
}
.child-overlap {
width: 80px;
height: 40px;
margin-left: -40px;
margin-top: -20px;
background: skyblue;
}
.child-absolute {
position: absolute;
left: -20px;
bottom: -20px;
width: 100px;
height: 40px;
background: gold;
}
/* --- demo 3 --- */
.box3 {
position: absolute;
left: 120px;
top: 60px;
width: 200px;
height: 120px;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
outline: 12px solid rgba(0, 0, 0, 0.5);
z-index: 1;
}
.child-outline {
width: 80px;
height: 40px;
margin-left: -40px;
margin-top: -20px;
background: skyblue;
}
.caption {
max-width: 520px;
font-size: 14px;
color: #333;
margin-bottom: 40px;
}
</style>
</head>
<body>
<!-- Demo 1 -->
<div class="stage">
<div class="backdrop"></div>
<div class="box">
<div class="child"></div>
</div>
</div>
<div class="caption">
<strong>Demo 1:</strong> <code>overflow: hidden</code> with semi-transparent border +
<code>background-clip: padding-box</code>.
Backdrop (tomato) shows through the border, background doesn’t paint under the border, and the blue child is
clipped.
</div>
<!-- Demo 2 -->
<div class="stage">
<div class="backdrop"></div>
<div class="box2">
<div class="child-inside">inside</div>
<div class="child-overlap">overlap</div>
<div class="child-absolute">absolute</div>
</div>
</div>
<div class="caption">
<strong>Demo 2:</strong> Borders are painted first. Children spilling out (blue and gold) render on top of the
border, while green stays inside.
</div>
<!-- Demo 3 -->
<div class="stage">
<div class="backdrop"></div>
<div class="box3">
<div class="child-outline">overlap</div>
</div>
</div>
<div class="caption">
<strong>Demo 3:</strong> Outline stroke. Outlines are painted last, always on top of content and children, even
overlapping the backdrop beyond the element’s box.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment