css - How to Make Square Corner Things? -

really vague question, know, don't know how describe them... basically, want these:

i'm talking corner things in red. what's easiest way achieve this? obviously, make individual divs in shapes, feel getting them in positions want, when re-sizes , stuff, pain. way?

here approach might useful. add 2 pseudo elements, 1 top , bottom borders , second left , right borders of color (white) such "white out" original border (blue in case).

this approach pure css , no mark-up involved.

div {    font-size: 4.00em;    padding: 40px;    border: 2px solid blue;    display: inline-block;    position: relative;  }  div:after {    content: '';    display: block;    border-left: 2px solid white;    border-right: 2px solid white;    position: absolute;    height: 50%;    left: -2px;    right: -2px;    top: 25%;    bottom: 25%;  }  div:before {    content: '';    display: block;    border-top: 2px solid white;    border-bottom: 2px solid white;    position: absolute;    height: 100%;    left: 25%;    right: 25%;    top: -2px;    bottom: -2px;  }

<div>box text</div>