× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Div with transparent gap inside border

Mar 02, 2015
<p>You make a <strong>gap between the background colour and border</strong> with :</p> <ul> <li>one element.</li> <li>a transparent border to make the transparent gap between the box-shadow and the background.</li> <li><code>background-clip:padding-box;</code> to clip the background inside the transparent border (otherwise the background colour would overflow and appear through the transparent border, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip" rel="nofollow">more info here</a>).</li> <li>a <code>box-shadow</code> with spread-radius for the outer line.</li> </ul> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 0, 0, .7); border: 10px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 4px #fff; } /** FOR THE DEMO **/ body {background: url('http://lorempixel.com/output/people-q-c-640-480-9.jpg');background-size: cover;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/28633229/Div%20with%20transparent%20gap%20inside%20border/28633314">Stack Overflow</a>.</p>
comments powered by Disqus