Page Widget How to - Create Beveled corners

Question

We would like to know how to create Beveled corners.

Answer

Code revised from
http://fiddle.jshell.net/leaverou/EjE7c


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--   w ww.  jav a2  s. co  m-->
  background: #c00; /* fallback */
  background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -o-linear-gradient(45deg, transparent 10px, #c00 10px),
    -o-linear-gradient(135deg, transparent 10px, #c00 10px),
    -o-linear-gradient(225deg, transparent 10px, #c00 10px),
    -o-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div.round {
  background: -moz-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 14px,
    #c00 15px), -moz-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0)
    14px, #c00 15px),
    -moz-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 14px, #c00
    15px), -moz-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 14px, #c00
    15px);
  background: -o-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 14px,
    #c00 15px), -o-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0)
    14px, #c00 15px),
    -o-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 14px, #c00 15px),
    -o-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 14px, #c00 15px);
  background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0)
    14px, #c00 15px),
    -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 14px,
    #c00 15px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0)
    14px, #c00 15px),
    -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 14px, #c00
    15px);
}

div, div.round {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
/* Ignore the CSS from this point, it's just to make the demo more presentable */
div {
  width: 500px;
  margin: 15px auto;
  padding: 13px 15px;
  color: white;
  line-height: 1.5;
}

p:first-of-type {
  margin-top: 0
}

p:last-of-type {
  margin-bottom: 0
}
</style>
</head>
<body>
  <div>
    <p>
      The main idea is to have 4 gradients that each occupy a quarter of
      the element's area (one for the bottom left, one for the bottom, on
      of the top right and one for the top left). Then you set the
      background to 4 linear gradients with the same color stops (in this
      case we wanted the corner size to be 10px*, so it was transparent <strong>until</strong>
      10px and then the color we want <strong>from</strong> 10px) except
      the corners that are 45deg, 135deg, 225deg and 315deg respectively.
    </p>
    <p>
      <small>*Actually not exactly 10px, it's the length of the
        hypotenuse of an isosceles right-angled triangle, which is around
        14px</small>
    </p>
  </div>
  <div class="round">By using radial gradients, you can simulate
    rounded corners with a negative radius. Just in this case, don't put
    the color stops at the exact same position, since the result will be
    too aliased in most browsers (and kinda still is in Webkit).</div>
</body>
</html>

The code above is rendered as follows: