How can I show only corner borders?

Question

I\'m wondering if it\'s possible in CSS or jQuery to make a border but only for corner. Something like this:

****                         ****
*                     


        

Answer 1

i think the best solution is the pseudo element method. Nice and clean and doesn't pollute the html with (too many) extra elements.

I created this sass mixin using the code above, for a copy&paste solution:

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

Then you can use it like this:

html:

    

        Content
    

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

You need the z-index & relative position in there so the content sits on top of the pseudo elements.

I made a codepen demo here: http://codepen.io/timrross/pen/XMwVbV