Page Widget How to - Illustrate CSS border-width property

Question

We would like to know how to illustrate CSS border-width property.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {<!--   w  w  w. jav  a2s .  c o m-->
  padding: 10px;
  margin-bottom: 20px;
  background: #ffb6c1;
  border: 2px solid #EEE;
}

div.one {
  border-radius: 10px;
}

div.two {
  border-radius: 10px 30px;
}

div.three {
  border-radius: 10px 30px 20px;
}

div.four {
  border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
  <div class="one">
    <strong>one-value syntax:</strong> the single value defines the radius
    of all corners.
  </div>
  <div class="two">
    <strong>two-value syntax:</strong> the first value defines the radius
    of top-left and bottom-right corner, while the second value defines
    the radius of top-right and bottom-left sides corner.
  </div>
  <div class="three">
    <strong>three-value syntax:</strong> the first value defines the
    radius of top-left corner, the second value defines the radius of
    top-right and bottom-left corner, and the third value defines the
    radius of bottom-right corner.
  </div>
  <div class="four">
    <strong>four-value syntax:</strong> each value defines the radius of
    the border individually in the order top-left, top-right,
    bottom-right, and bottom-left corner.
  </div>
  <p>
    <strong>Warning:</strong> Internet Explorer 8 and earlier versions
    don't support the
    <code>border-radius</code>
    property.
  </p>
</body>
</html>

The code above is rendered as follows: