Code Snippet

Home » Code Snippets » CSS » Transparent Inside Border

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

Subscribe to The Thread

  1. oboshto

    Great snippet. Thank you, Chris.

    Reply ↓
  2. Stijn

    You could do the same with:

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

    or am i mistaking myself?

    Reply ↓
  3. Mohsin @ startablog

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~