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

Current day month ye@r *

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