Page Widget How to - Set border radius to create round border

Question

We would like to know how to set border radius to create round border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.corners {<!--  w w w.ja v a 2  s . co  m-->
  position: relative;
  background: #666;
  width: 400px;
  height: 100px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 10px;
}

.corners p {
  font: italic 22px Georgia;
  color: #fff;
  vertical-align: middle;
  height: 50px;
  position: inherit;
  top: 20px;
  left: 20px;
}
</style>

</head>
<body>
  <div class="corners">
    <p>
      Box-shadow has four parameters:<br /> x-offset, y-offset, blur,
      color
    </p>
  </div>
</body>
</html>

The code above is rendered as follows: