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

Assuming <div id="content">CONTENT</div> and that CONTENT includes at least one HTML node.

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

Here's a Fiddle

Answer 2

You could absolutely position four <div>s, one in each corner, each with the appropriate two borders.

HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}

Answer 3

Here are a couple of methods to create this effect without using any extra pseudo/real elements. One thing to note is that both these approaches would work only in modern browsers because they use CSS3 properties.

Using border-image: The border-image property makes it pretty easy to create such effects. The approach is as follows:

• Create a transparent image which has borders just in the corner like here.
• Set this image as the border-image-source and let the browser take care of the rest :) Since the default value for border-image-repeat is stretch, the browser would stretch the original image to fit the container even if the container becomes large.
• The value set for the border-image-width property determines how thick the borders are.

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 1;
  border-image-width: 5px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered large-square'></div>

Advantages:

• Needs no extra elements (pseudo or real) which means less cluttered markup, pseudo elements can be used for other needs.
• Is reasonably responsive. That is browser will adapt the borders even if container's dimensions change.

Drawbacks:

• Relatively lower browser support. If IE10- support is needed then this is a no-go.

• Since the border image is getting stretched, if the original image's canvas is a square and the container is a rectangle then the borders would look wider at top and bottom than left and right.

  .bordered {
    background-color: beige;
    border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
    border-image-slice: 2;
    border-image-width: 5px;
  }
  .small-square {
    height: 75px;
    width: 75px;
  }
  .square {
    height: 150px;
    width: 150px;
  }
  .large-square {
    height: 350px;
    width: 350px;
  }
  .rectangle {
    height: 150px;
    width: 250px;
  }
  .large-rectangle {
    height: 150px;
    width: 350px;
  }
  
  /* Just for demo */
  
  div {
    margin-bottom: 10px;
  }

  <div class='bordered small-square'></div>
  <div class='bordered square'></div>
  <div class='bordered large-square'></div>
  <div class='bordered rectangle'></div>
  <div class='bordered large-rectangle'></div>

---

Using background-image: The background-image property can also be used with linear-gradient images to produce the effect. The approach is as follows:

• Create four linear-gradient images (two for top, bottom and two for left, right). These gradients would start with required color and continue to be that color for as many pixels as the width/height of the border image. After that it should be transparent.
• For top and bottom borders, gradient's direction should be to right. For left and right borders, it should be to bottom.
• The background-size value determines the thickness of the border. For top and bottom borders, the size of the gradient image would be 100% in X-axis and 5px (thickness) in Y-axis. For left and right borders, the size would 5px (thickness) in X-axis and 100% in Y-axis.
• The background-repeat should be set to repeat-x for the top, bottom borders and to repeat-y for left and right borders.
• The background-position is set to (-1 * half the size of the color in gradient) in the X or Y-axis as appropriate. This is to make half of the colored area appear on one side of the element while the other half appears on the other side (because gradient is repeating).

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.rectangle {
  height: 150px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered rectangle'></div>

Advantages:

• Needs no extra elements (pseudo or real) which means less cluttered markup, pseudo elements can be used for other needs.

• Is reasonably responsive as the width of the color in gradient is fixed. If the width of the borders dashes need to change according to the container's dimensions then we can change the pixels value in gradient to percentage (with a few more minor changes) like in below snippet.

  .bordered.square {
    height: 150px;
    width: 150px;
  }
  .bordered.large-square {
    height: 250px;
    width: 250px;
  }
  .bordered {
    background-color: beige;
    background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
    background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
    background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  }
  
  /* Just for demo */
  
  div {
    margin-bottom: 10px;
  }

  <div class='bordered square'></div>
  <div class='bordered large-square'></div>

Drawbacks:

• Relatively better browser support. If IE9- support is needed then this is a no-go.
• If percentage based gradient is used then the same drawback with rectangles as mentioned for border-image would be applicable here also.

Answer 4

SVG

This is another great alternative if you now want to start using vectors to allow for great responsiveness.

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

SVG is a great tool to use. Some of the advantages of using SVG in this case are:

• Curve control
• Fill control (opacity, color)
• Stroke control (width, opacity, color)
• Amount of code
• Time to build and maintain the shape
• Scalable
• No HTTP request (if used inline like in the example)

---

Browser support for inline SVG goes back to Internet Explorer 9. See canIuse for more information.

Answer 5

There is no clean css way to just give the corners a border, but you could try to mimic the effect. Something like this perhaps: http://jsfiddle.net/RLG4z/

<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

due to the difference in border radius, the background color of the underlying div shows trough, giving the effect of a border on the corners.

Personally I think i would work with background images to achieve this, for better controle of the result.

Answer 6

Here is a modified version of the above answer, this version has relative positioned parent and absolute positioned child so we can add the on hover effect.

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}