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 liked @Tims approach, but it forced me to set a background color to the box, which I did not want, since I it to put the focus on a background image object. In my case I only needed 2 edges also, which makes it possible to structure it a little different.

I therefore structured it a little different, that makes it more flexible and still works in every browser.

The solution does not work if you need 4 corners, but just wanted to leave it here for future searchers.

:root {
  --border-width: 5px;
  --corner-size: 20px;
  --border-color: red;
}
    
.box-corners {
  position:relative;
}

        .box-corners::before,
        .box-corners::after {
            content: "";
            position: absolute;
            width:var(--corner-size);
            height:var(--corner-size);
            border:var(--border-width) solid var(--border-color);
        }
    
        .box-corners::before {
            left: 0;
            top: 0;
            border-bottom:none;
            border-right:none;
        }
    
        .box-corners::after {
            bottom: 0;
            right: 0;
            border-left:none;
            border-top:none;
        }
        
        
/* ############## THIS IS JUST OPTIONAL FOR THE HOVER EFFECT ############# */


    .box-corners {
        transition:background-color 0.3s ease-in-out;
    }


    .box-corners:hover {
        background:rgba(0, 0, 0, 0.5)!important;
    }

        .box-corners::before,
        .box-corners::after {
            box-sizing:border-box;
            transition:width 0.3s ease-in-out, height 0.3s ease-in-out;
        }

        .box-corners:hover::before,
        .box-corners:hover::after {
            width:100%;
            height:100%;
        }

Hover effect

You only need the first part of the css code to make the edges work. The second part just allows to easily add a nice hover effect, that you could also just remove, if you don't need it.

Without CSS Variables and Sass

If you don't want to use css variables, you can just replace the variables with hardcoded values. If you want to make a sass mixin out of it, just wrap it in a @mixin call and replace the vars with sass variables.