CODEWITHSUNDEEP
htmlcss
Shivam Pandya
Shivam Pandya

Reputation: 1061

CSS : add space in border corner

I want to add white space in top left border square's bottom right corner. currently my code return full square border. but I want space in border corners like attached image.
enter image description here
Here is my code.

HTML

<div class="top-left-corner"></div>

CSS

.top-left-corner{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    border-right: 1px solid #7a7a7a;
    border-bottom: 1px solid #7a7a7a;
    height: 70px;
    width: 70px;
}

Here is Fiddle FIDDLE

.top-left-corner {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #7a7a7a;
  border-bottom: 1px solid #7a7a7a;
  height: 70px;
  width: 70px;
}
<div class="top-left-corner">
</div>

Upvotes: 1

Views: 1360

Answers (2)

Pete
Pete

Reputation: 58422

You could do it using the before and after pseudo selectors:

.top-left-corner {
    top:0;
    left:0;
    position: absolute;
    height: 70px;
    width: 70px;
}

.top-left-corner:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:20px; /*change this for the size of the gap*/
  border-bottom: 1px solid #7a7a7a;
}

.top-left-corner:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:20px;     /*change this for the size of the gap*/
  border-right: 1px solid #7a7a7a;
}
<div class="top-left-corner"></div>

Upvotes: 2

JHair
JHair

Reputation: 304

Could you do something like this (if you know the colour of the background behind your square - https://jsfiddle.net/pz7rcg4u/3/ 

.top-left-corner:after{
content: "";
position: absolute;
bottom:-1px;
right: -1px;
z-index: 1;
height: 10px; /* size of white space */
width: 10px;
border-right: 1px solid #F3F5F6;
border-bottom: 1px solid #F3F5F6; /* color of white space */

}

Upvotes: 2

Related Questions