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 think the best solution is the pseudo element method. Nice and clean and doesn't pollute the html with (too many) extra elements.

I created this sass mixin using the code above, for a copy&paste solution:

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

Then you can use it like this:

html:

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

You need the z-index & relative position in there so the content sits on top of the pseudo elements.

I made a codepen demo here: http://codepen.io/timrross/pen/XMwVbV

Answer 2

This is your picture:

HTML:

<div class="shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

and CSS:

.shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }

Answer 3

clip-path

Using two div's on top of each other.
And adding a clip-path to div that in the back you can create a border like effect.

.wrapper {
  display: inline-block;
  background-color: black;
  line-height: 0px;
  -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
    clip-path: polygon(0% 100%, 
                             30% 100%, 
                             30% 70%, 
                             70% 70%, 
                             70% 100%, 
                             100% 100%, 
                             100% 70%, 
                             70% 70%,
                             70% 30%,
                             100% 30%,
                             100% 0%,
                             70% 0%,
                             70% 30%,
                             30% 30%,
                             30% 0%,
                             0% 0%,
                             0% 30%,
                             30% 30%,
                             30% 70%,
                             0% 70%);
}
.wrapper {} .wrapper div {
  display: inline-block;
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: white;
}

<div class="wrapper">
  <div></div>
</div>

two pseudo elements

Using two large pseudo elements you can create the border effect.

.cut-border {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  width: 150px;
  height: 150px;
}
.cut-border::before {
  content: "";
  position: absolute;
  height: calc(100% + 10px);
  width: 50%;
  background-color: white;
  top: -5px;
  left: 25%;
}
.cut-border::after {
  content: "";
  position: absolute;
  height: 50%;
  width: calc(100% + 10px);
  background-color: white;
  top: 25%;
  left: -5px;
}

<div class="cut-border"></div>

Answer 4

I would use overlapping divs.

One with square corners. And the Other with rounded corner (so it doesn't hide the corners of the first one).

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

Result:

---

An enhanced solution provided by @web-tiki:

http://jsfiddle.net/webtiki/y3EfP/147/

Answer 5

Ok as i suck in CSS i think i'll not be able to do it myself but i do that and it seems work :

<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>

And it seems to be working ;-) Sorry for disturb and thanks for your help.

Answer 6

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

<div class="box">
some content
</div>

<div class="box" style="--c:blue;--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:green;--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:black;--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:orange;--w:calc(50% - 10px);--b:4px">
some content
</div>

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

<div class="box">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px">
some content
</div>