How to border images using Html5+css?

Asked

Viewed 6,101 times

2

The code developed until fractionated group is here if you need the complete code will be in Pastebin

HTML: https://pastebin.com/9k1Xd9MC

<!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:https://pastebin.com/KBKiK2df

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

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



figure.foto-legenda { 
border: 8px solid red;
}
css html5

2 answers

1


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

Other than that if you want the border only in the images you should use a selector that selects all the img, like this .class img { borda }

To better understand 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>

0

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

In the example below we define a 4px border, with solid style and 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:

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.