CSS3でボックスの角にベベル（丸くないborder-radius）をかける方法

style.css

# http://webrocketsmagazine.com/entry/20120203/css3-bevel.html
/* CSS3でボックスの角にベベル（丸くないborder-radius）をかける方法 */
.bevel {
  background:
    linear-gradient(45deg,  transparent 10px, #0099ff 10px),
    linear-gradient(135deg, transparent 10px, #0099ff 10px),
    linear-gradient(225deg, transparent 10px, #0099ff 10px),
    linear-gradient(315deg, transparent 10px, #0099ff 10px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
/* 丸いベベル */
.round {
  background:
    radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #0099ff 15px),
    radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #0099ff 15px),
    radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #0099ff 15px),
    radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #0099ff 15px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}