Border Radius

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 40 de 76.

No CSS, a propriedade border-radius é usada para criar cantos arredondados para um elemento. Esta propriedade permite que você especifique o raio da curvatura para cada canto, dando a você controle sobre a forma da borda do elemento. Aqui está 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 os passos 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 border-radius como 15px para dar a todos os cantos a mesma forma arredondada.
Escreva uma regra CSS usando um seletor de classe para selecionar todos os elementos com a classe "two". Defina a borda como qualquer valor e o border-radius como qualquer valor de sua escolha.

Folha de consulta

A propriedade border-radius cria cantos arredondados para elementos:

selector {
    border-radius: value;
}

Os valores podem ser especificados em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Valor único - aplica o mesmo raio a todos os cantos:

div {
    border-radius: 10px;
}

Quatro valores - cantos individuais (superior esquerdo, superior direito, inferior direito, inferior esquerdo):

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

Dois valores - o primeiro aplica-se ao superior esquerdo e inferior direito, o segundo ao superior direito e inferior esquerdo:

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

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>