Treehouse: 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

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>
```