O objetivo deste manual é explicar como criar bordas de cantos arredondados. Para isso, primeiramente, devemos saber sobre o “ fronteira ' propriedade. Então, vamos começar!
O que é propriedade “border” em CSS?
Para criar uma borda em torno de um elemento, você precisa usar o “ fronteira ' propriedade. Usando esta propriedade, você pode definir o “ estilo ”, “ cor ', e ' largura ” da fronteira.
Sintaxe
A sintaxe da propriedade border é dada como:
fronteira : cor do estilo de largura
Aqui está a descrição dos valores fornecidos acima:
- largura: É usado para definir a largura da borda.
- estilo: É usado para definir o estilo da borda, como pontilhada, tracejada, sólida ou dupla.
- cor: Determina a cor da borda.
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 isso, vamos criar um
e
:
< corpo >
< div classe = 'canto' >
< h1 > dica do Linux < / h1 >
< p > Cantos arredondados em CSS < / p >
< / div >
< / corpo >
Em seguida, passaremos para a seção CSS.
Aqui o ' .canto ” é usado para acessar a classe atribuída ao
.canto {
fronteira : 4px sólido rgb ( 248 , 6 , 107 ) ;
largura : 250px ;
altura : 150px ;
cor de fundo : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Depois de ter implementado o código acima mencionado, vá para o arquivo HTML e execute-o. Você verá o seguinte resultado:
Agora, passaremos para a próxima parte, onde criaremos a borda quadrada para a borda do canto arredondado.
Como arredondar cantos usando CSS?
Para criar uma borda de canto arredondado, o “ raio de borda ” está sendo usada, na qual você pode definir o raio do canto de acordo com suas preferências.
Sintaxe
A sintaxe da propriedade border-radius é dada abaixo:
raio de borda : valorVamos continuar o exemplo anterior e definir o border-radius para obter cantos arredondados.
Exemplo
Dentro ' .canto ” do arquivo CSS, defina o valor de “ raio de borda ” propriedade como “ 30px ”:
raio de borda : 30px ;Com a linha acima adicionada, você obterá a seguinte saída:
A saída fornecida acima significa que as bordas são alteradas com sucesso em cantos arredondados devido à propriedade border-radius.
Conclusão
Em CSS “ raio de borda ” é utilizada para alterar o canto das bordas. A forma da curva muda de acordo com o valor de raio dado. Usando a propriedade mencionada, você pode definir o raio do canto de acordo com sua escolha. Neste artigo, explicamos como arredondar bordas de canto usando a propriedade border-radius com a ajuda de um exemplo.