How to add a border or frame around both the figure including its caption?
I tried to use style for figure, but no border shows up. I do not want border around img, but around both figure and caption if any.
<!DOCTYPE HTML>
<html lang="en">
<body>
<figure style="border-width:thin">
<img src="image.png">
<figcaption>my image</figcaption>
</figure>
</body>
</html>
For some unknown reason, the predefined value of the border-width is not working. See the CSS code below:
figure {
border: 1px solid #000;
padding: 5px;
}
Or you can do this:
<figure style="border: 1px solid #000">
<img src="http://placehold.it/220x180.png">
<figcaption>my image</figcaption>
</figure>
Whichever is easier, take your pick.
Demo:
http://jsfiddle.net/jlratwil/gNFpv/4/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With