All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Transparent Inside Border

Last updated on:
<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. oboshto
    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?

    • Zach Saucier
      Permalink to comment#

      This has rendering errors in some browsers and also does not allow for border-radius effects

  3. Mohsin @ startablog
    Permalink to comment#

    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. Mano
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed