How to place borders in images using html5 + css?

Navigation
2

The code developed until fragmented is here if you need the complete code will be in pastebin

HTML: link 

<!DOCTYPE html>

<html lang="pt-br">

<head>
    <meta charset="UTF-8"/>
    <title>Google Glass</title>
    <link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
</head>

<body>
<div id="interface">

<figute class="foto-legenda">
<image src="_imagens/glass-quadro-homem-mulher.jpg">
<figcaption>
    <h1>Google Glass</h1>
    <h2>Uma nova maneira de ver o mundo!</h2>
</figcaption>
</figute>

</div>
</body>

</html>

CSS: link 

@charset "UTF-8";
body {
        color: black;
        }

    p {
        text-align: justify;
        text-indent: 50px;
       }



figure.foto-legenda { 
border: 8px solid red;
}
    
asked by anonymous 27.09.2018 / 02:58

2 answers

1

Look you had two syntax errors in your code. First, the image tag is <img> and not <image> and its <figure> tag was spelled wrong ... figuTe

If you want the border only in the images you must use a selector that selects all the img, type .class img { borda }

To understand better see the code below with the corrections. 

@charset "UTF-8";
body {
    color: black;
}

p {
    text-align: justify;
    text-indent: 50px;
}

figure.foto-legenda img {  /* seleciona todas as img dentro de figure com a classe foto-legenda */
    border: 8px solid red;
}
<div id="interface">

<figure class="foto-legenda">
<img src="https://placecage.com/100/100">
<figcaption>
    <h1>Google Glass</h1>
    <h2>Uma nova maneira de ver o mundo!</h2>
</figcaption>
</figure>
    
27.09.2018 / 03:12
0

Simple, to place borders on images you can use the CSS border property. For this we need to define the size of the border, its type and its color.

In the example below we define a border of 4px, with solid style and with the color #000 , black. 

img {
  width: 200px;
  height: 200px;
  border: 4px solid #000;
}
<img src="https://image.freepik.com/free-photo/table-with-fuzzy-background_1253-28.jpg">

References:

27.09.2018 / 03:10
How to create a TreeMap to store words and the lines where they appear? XAMARIN - List View with Binding without Information