Entrar Ainda não tem acesso?
1
resposta

Bordas redondas na imagem

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Height e box-sizing

por William Franck Medrado Barbosa
| 51.7k xp | 3 posts
Auxiliar de Suporte TI Jr I

Olá, pessoal. Tudo bem?

Estou com uma dúvida, decidi inserir a minha própria imagem no lugar da imagem exemplo utilizada nas aulas. Porém, as bordas da minha imagem estão quadradas.

Descobri agora a pouco que é possível arredonda-las com o próprio css, no entanto, já fiz de tudo e a imagem continua quadrada. Ela não possui fundo branco, nem transparente, então deveria funcionar certinho.

Alguém me help, plz??

Tks <3

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <style type="text/css">
        img{
            border-radius: 20px;
        }
        </style>
</head>
<body>
    <header></header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou William Medrado, desenvolvedor Front-end com especialidade em <strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="https://instagram.com/franckmedrado">Instagram</a> 
        <a href="https://github.com/wmedrado">Github</a>
        <img src="imagem.png" alt="Foto do William Medrado">
        <link rel="stylesheet" href="style.css">
    </main>
    <footer></footer> 
</body>
</html>

Print do site com a imagem do escritor

1 resposta
por Eudes Benevides
| 153.1k xp | 1 posts

Olá, William, tudo bem? Seu código apresenta alguns problemas. Primeiro, esse link para o arquivo CSS que você colocou após a tag <img> deve estar dentro da <head>, desta forma:

    <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
</head>

Segundo, abra o arquivo CSS ao qual você vinculou e insira o seguinte código:

img {
    border-radius: 20px;
}

Sua linha de pensamento está correta, apenas os códigos estão no lugar errado.

Html completo:

    <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou William Medrado, desenvolvedor Front-end com especialidade em <strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="https://instagram.com/franckmedrado">Instagram</a> 
        <a href="https://github.com/wmedrado">Github</a>
        <img src="imagem.png" alt="Foto do William Medrado">
    </main>
    <footer></footer> 
</body>
</html>

CSS:

img {
border-radius: 20px;
}