Grow your CSS skills. Land your dream job.

Last updated on:

Transparent Inside Border

<div class="inner-border">
    Transparent Inside Border
</div>
.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

Reference URL

Comments

  1. Permalink to comment#

    Great snippet. Thank you, Chris.

  2. Stijn
    Permalink to comment#

    You could do the same with:

    .inner-border {
          outline: solid black 5px;
          outline-offset: 5px;
    }

    or am i mistaking myself?

  3. What is the use of this code. I mean to say where should i apply this technique.

  4. Jon
    Permalink to comment#

    Actually, what Stijn said works. You just have to set the offset the negative of the outline width.

  5. Permalink to comment#

    Jon, using the outline property works great in Webkit-based browsers. Firefox however does not render it perfectly and IE 9 renders it like a normal border.

    Using Chris’ method works across all of these browsers.

  6. payel

    hello,

    Thanks, worked great…
    .inner-border {
    background: #fff;
    color: #626262;
    padding: 15px;
    position: relative;

    }
    .inner-border:before {
    border: 4px solid #e7e7e7;
    content: “”;
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    -webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
    box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
    }

  7. Sajidur Rahman
    Permalink to comment#

    You should try this. Best solution i found :

    -webkit-box-shadow: 0px 0px 0px 1px #fff;
    box-shadow: 0px 0px 0px 1px #fff;

    It doesn’t adds any extra pixels.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".