Raio da Borda

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 40 de 76.

Em CSS, a propriedade border-radius é usada para criar cantos arredondados para um elemento. Essa propriedade permite especificar o raio da curvatura de cada canto, dando a você controle sobre o formato da borda do elemento. Veja a sintaxe básica para usar a propriedade border-radius:

selector {
    border-radius: value;
}

value: O raio desejado para os cantos arredondados, que pode ser especificado em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Você pode especificar um único valor para aplicar o mesmo raio a todos os quatro cantos. No exemplo a seguir, todos os elementos <div> terão cantos arredondados com um raio de 10px.

div {
    border-radius: 10px;
}

Você pode definir os valores diferentes para cada canto individualmente, usando a seguinte ordem: superior esquerdo, superior direito, inferior direito, inferior esquerdo.

.button {
    border-radius: 10px 20px 30px 40px;
}

Você também pode especificar apenas dois valores, o primeiro valor será aplicado aos cantos superior esquerdo e inferior direito, e o segundo valor será aplicado aos cantos superior direito e inferior esquerdo.

img {
    border-radius: 20px 50px;
}

Desafio

Fácil

Você recebeu um documento HTML com dois elementos <div>, cada um com as classes "one" e "two". Siga as etapas abaixo:

Escreva uma regra CSS usando um seletor de classe para selecionar todos os elementos com a classe “one”. Defina a borda como 3px solid #4287f5 e o raio da borda como 15px para dar a todos os cantos o mesmo formato arredondado.
Escreva uma regra CSS usando um seletor de classe para selecionar todos os elementos com a classe “two”. Defina a borda com qualquer valor e o raio da borda com qualquer valor de sua escolha.

Experimente você mesmo

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>