Border Corners: Triangle

Question

Is it possible to get rid of the \"triangle\" shape in the border corners? (when using different color borders)

See this example:

http://jsfiddle.net/GLsqV/

Answer 1

Not everywhere with a single element. (Actually, the default triangular shape of borders is what makes great things possible: The Shapes of CSS)

However, what you are asking for is easily possible everywhere with another child element.

CSS:

.borders {
  width: 520px;
  height: 500px;
  border-top: 10px solid red;
  border-bottom: 10px solid green;
}

.borders2 {
  background: #efefef;
  width: 500px;
  height: 500px;    
  border-left: 10px solid black;
  border-right: 10px solid black;
}

​ HTML:

  

  
​

With these values, the outer DIV's border-box will still have a size of 520×520 pixels.

See also this fiddle.