Fronteiras arredondadas no CSS
- Como funciona o raio da fronteira
- Como obter as fronteiras arredondadas no CSS
Como obter fronteiras arredondadas no CSS
As fronteiras arredondadas são apoiadas pela propriedade do Radio de Fronteira do CSS. Primeiro, examinaremos o trabalho da propriedade Radius de fronteira e depois forneceremos alguns exemplos.
Como funciona o Radius de fronteira
A propriedade de Radius de Fronteira é a propriedade abreviada que compreende as propriedades declaradas abaixo:
Radio-de-borda-esquerda, radio-radio de borda-direita, raio-esquerda-esquerda-esquerda e raio-de-borda-de-garoto-fundo.
Principalmente o funcionamento do Radio de Fronteira depende da seguinte sintaxe:
Radio de fronteira: Value;Como a propriedade de Radius de fronteira é uma propriedade abreviada de quatro propriedades infantis, pode aceitar mais do que valor. Se você deseja ter um raio diferente para várias fronteiras, poderá escolher uma das seguintes possibilidades.
arredondar todas as fronteiras com o mesmo tamanho
Radio de fronteira: Value;Redondo superior esquerdo/canto inferior direito e superior direito/inferior à esquerda para o mesmo tamanho
Radio de fronteira: Value1 Value2;Bordas redondas no topo esquerdo, o canto superior direito e o canto inferior direito
Radio de fronteira: valor1 valor2 valor3;Se você quiser obter fronteiras arredondadas com tamanhos diferentes
Radio de fronteira: valor1 valor2 valor3 valor4;Os próximos exemplos são praticados usando a sintaxe fornecida acima.
Exemplo 1: Obtendo as fronteiras arredondadas
O código fornecido abaixo é executado para obter as fronteiras arredondadas
Bem -vindo ao Linuxhint
Valey of Tech
Guias no HTML
Guias no CSS
O código é descrito como,
- Tag dentro, as aulas se deliciosas são feitas denominadas "um", "dois", "três" e "quatro"
- A classe “One” vai arredondar todas as fronteiras para 20px,
- A classe “dois” vai arredondar as fronteiras superior esquerda/parte inferior direita e superior direita/inferior esquerda para 25px e 25px.
- A classe "três" rodadas três fronteiras no topo, superior direito e canto inferior direito
- A aula de Dour vai arredondar todas as fronteiras para tamanhos diferentes
- Dentro da tag, quatro parágrafos são declarados que mostram o uso das quatro classes CSS mencionadas na tag
A imagem do código é fornecida abaixo
A imagem da saída na página da web mostrada abaixo:
Exemplo 2: Obtenha a fronteira arredondada de escolha
O exemplo acima completa as fronteiras no pedido predefinido. Por exemplo, se você usar um valor com propriedade-radius de fronteira, todas as fronteiras serão arredondadas, da mesma forma, se três valores forem fornecidos, a borda inferior esquerda não será arredondada.
Digamos que não queremos arredondar a borda inferior direita. Nessas situações, você deve usar quatro valores e usar 0px no lugar da borda inferior direita. O código a seguir é usado para praticar o exemplo de fronteira arredondada da escolha:
Bem -vindo ao Linuxhint
O código acima é descrito como:
- A propriedade de Radius de Fronteira é definida na etiqueta de estilo em que o 0px é usado para pular o arredondamento da borda inferior direita
- O estilo de fronteira é usado para melhor visibilidade
- No corpo, um parágrafo está escrito sobre o qual a borda arredondada está sendo usada
A imagem do editor de código é exibida abaixo:
Saída
Depois de passar por isso, você teria aprendido o funcionamento do raio da fronteira e suas propriedades associadas em vários cenários.
Conclusão
A propriedade de Radius da fronteira facilita a obtenção das fronteiras arredondadas no CSS. O Radio de Fronteira é a propriedade de mão curta e contém funcionalidades de quatro propriedades. Este artigo demonstra as possíveis maneiras de obter as fronteiras arredondadas no CSS. Para fazer isso, apresentamos o funcionamento da propriedade Radius de fronteira em CSS. Além disso, para melhor compreensão, também demonstramos vários exemplos para levá-lo às fronteiras arredondadas no CSS usando a propriedade de Radius de Fronteira.