Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add frame/border around new figure element in HTML5?

Tags:

html

css

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>
like image 635
Steve H Avatar asked Nov 14 '25 12:11

Steve H


1 Answers

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/

like image 166
Jaime Gris Avatar answered Nov 17 '25 09:11

Jaime Gris



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!