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

Here is an idea using gradient and CSS variables where you can easily control the shape of your border:

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  border:var(--b) solid transparent; /* space for the border */
  background:
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) bottom right,
    linear-gradient(var(--c),var(--c)) bottom right;
  background-size:var(--b) var(--w),var(--w) var(--b);
  background-origin:border-box;
  background-repeat:no-repeat;
  
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}

some content



some content



some content



some content



some content



some content

You can also have a complex coloration if you combine this with mask:

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  -webkit-mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  -webkit-mask-size:var(--b) var(--w),var(--w) var(--b);
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  mask-size:var(--b) var(--w),var(--w) var(--b);
  mask-repeat:no-repeat;
}

some content



some content



some content



some content



some content



some content