O estilo é uma parte importante do desenvolvimento de sites HTML, e o CSS fornece estilos diferentes para elementos HTML; Um deles é criar uma fronteira em torno de qualquer elemento. Principalmente é usado para diferenciar entre seções usando formas de borda, como sólido, tracejado, pontilhado e duplo.

O objetivo deste manual é explicar como criar fronteiras redondas de canto. Para isso, primeiro, devemos saber sobre o “fronteira" propriedade. Então, vamos começar!

O que é a propriedade de "fronteira" em CSS?

Para criar uma fronteira em torno de um elemento, você precisa usar o “fronteira" propriedade. Ao usar esta propriedade, você pode definir o “estilo","cor", e "largura”Da fronteira.

Sintaxe

A sintaxe da propriedade da fronteira é dada como:

Fronteira: cor do estilo de largura

Aqui está a descrição dos valores acima:

• largura: É usado para definir a largura da fronteira.
• estilo: É usado para definir o estilo de fronteira, como pontilhado, tracejado, sólido ou duplo.
• cor: Determina a cor da fronteira.

Aqui está um exemplo em que implementamos o “fronteira" propriedade.

Como criar borda usando CSS?

Para criar uma borda, primeiro, adicione um elemento em um arquivo html. Para fazer isso, criaremos um e atribuiremos um “canto”Class. Depois disso, adicionaremos um título e parágrafo usando

e

Tag:

Linux Dica

Cantos redondos no CSS

Em seguida, vamos mudar para a seção CSS.

Aqui o ".canto”É usado para acessar a classe atribuída ao . Depois disso, criaremos uma fronteira usando o “fronteira”Propriedade e atribua os valores de largura, estilo e cor como“4px","sólido", e "RGB (248, 6, 107)”, Respectivamente. Além disso, adicionaremos a largura “250px", altura "150px”E cor de fundo“RGB (234, 0, 255)”Para a div:

.canto
borda: 4px RGB sólido (248, 6, 107);
Largura: 250px;
Altura: 150px;
Background-Color: RGB (234, 0, 255);

Depois de implementar o código mencionado acima, vá para o arquivo html e execute -o. Você verá o seguinte resultado:

Agora, vamos nos mudar para a próxima parte, onde criaremos a fronteira quadrada para a borda da canto redonda.

Como fazer a esquina redonda usando CSS?

Para criar uma fronteira de canto redonda, o “Radio de fronteira”Propriedade está sendo usada, na qual você pode definir o raio do canto de acordo com suas preferências.

Sintaxe

A sintaxe da propriedade Radius de fronteira é dada abaixo:

Radio de fronteira: valor

Vamos continuar o exemplo anterior e definir o radiato da fronteira para alcançar os cantos redondos.

Exemplo

Em ".canto”Classe do arquivo CSS, defina o valor de“Radio de fronteira"Propriedade como"30px”:

Radio de fronteira: 30px;

Com a linha acima adicionada, você obterá a seguinte saída:

A saída acima mencionada significa que as fronteiras são transformadas com sucesso em cantos redondos por causa da propriedade de Radius de Fronteira.

Conclusão

Em CSS “Radio de fronteira”A propriedade é utilizada para mudar o canto das fronteiras. A forma da curva muda de acordo com o valor dado do raio. Usando a propriedade mencionada, você pode definir o raio do canto de acordo com sua escolha. Neste artigo, explicamos como fazer fronteiras de canto redondo usando a propriedade Radius de fronteira com a ajuda de um exemplo.