HTML Element Style How to - Add border to image figure

Question

We would like to know how to add border to image figure.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
figure {<!--from  w  w w  .j a  v  a  2 s .  c o m-->
  margin: 1em;
  padding: 0;
  background: #f6f6f6;
  border: 1px solid #eee;
  width: 30%;
  box-shadow: 2px 2px 1px #ccc;
  border-radius: 6px;
}

figure img {
  display: block;
  max-width: 90%;
  max-height: 150px;
  margin: 6% auto 0 auto;
}

figcaption {
  padding: 4px 0;
  text-align: center;
  font-style: italic;
  font-size: 85%;
  color: #666;
  margin: 0;
  line-height: 1;
  display: block;
}
</style>
</head>
<body>
  <figure class="thumb">
    <img src="http://placehold.it/80x80" />
    <figcaption>Caption</figcaption>
  </figure>
</body>
</html>

The code above is rendered as follows: