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 found this question, but I was not satisfied with the border-radius approach: As I was using more thick borders, the effect was not as good as I wanted to. I managed to create another solution, without images, and without any extra markup:

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

Here's a JSFiddle with this example: https://jsfiddle.net/t6dbmq3e/ Hope it helps.

Answer 2

You can achieve that using multiple linear gradients as a background image.

div {
  width: 100px;
  height: 100px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}

<div></div>

Answer 3

Here is something that i did recently with content centred both vertically and horizontally.

The HTML

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

The CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

Answer 4

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%;
        }

<div class="box-corners" style="width:300px;height:300px;background:#f7f7f7;" />

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.