Page Widget How to - Create Beveled corners with negative border-radius

Question

We would like to know how to create Beveled corners with negative border-radius.

Answer


<!--   www.  j a  v  a 2 s  . c o m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {
  background: #EEE;
  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 {
  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;
}
div {
  float: left;
  width: 50px;
  margin: 15px auto;
  padding: 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>By using radial gradients</div>
</body>
</html>

The code above is rendered as follows: