Dicas e tutoriais de CSS3

Gerador de bordas arredondadas no CSS – Border-Radius Online

Gerador de Border-Radius Online, por que você não é obrigado a decorar tudo! ;D

O Gerador de bordas arredondadas no CSS foi desenvolvido em Javascript, qualquer dúvida, problema ou sugestão, por favor faça um comentário.

Sobre Border-Radius

Definição: é uma propriedade do CSS utilizada para arredondar as bordas de um elemento.

Sendo border-radius uma abreviação para:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Suportado pelos navegadores / versões:

Chrome >= 5.0
Mozilla >= 4.0
Internet Explorer >= 9.0
Safari >= 5.0
Opera >= 10.5

Se você especificar apenas um valor para a propriedade do border-radius, esse raio será aplicado a todos os 4 cantos.

No entanto, você pode especificar cada canto separadamente, se desejar. Aqui estão as regras:

Quatro valores: o primeiro valor se aplica à parte superior esquerda, o segundo valor se aplica ao canto superior direito, o terceiro valor se aplica ao canto inferior direito e o quarto valor se aplica ao canto inferior esquerdo
Três valores: o primeiro valor aplica-se ao superior esquerdo, o segundo valor se aplica ao canto superior direito e inferior esquerdo e o terceiro valor se aplica ao canto inferior direito
Dois valores: o primeiro valor aplica-se ao canto superior esquerdo e inferior direito e o segundo valor aplica-se ao canto superior direito e inferior esquerdo
Um valor: os quatro cantos são arredondados igualmente

Conclusão do Gerador de bordas arredondadas

Objetivo é gerar o código já abreviado, diferente de outras ferramentas que geram todas as declarações, criando um peso morto desnecessário para a sua aplicação.

E claro o mais importante também é você decorar a sintaxe e utilizar esta página apenas para validar visualmente alguns testes.

Observação: você não precisa das versões da propriedade para WebKit e Gecko pois todos os navegadores modernos suportam o CSS 3.

Não obrigatórios

  • -moz-border-radius:
  • -webkit-border-radius:

 

 

Tags: csscss3

Ver comentários

Post Recentes

Cron do Magento 2 não roda: status missed e pending no cron_schedule

Pedido que não fatura e e-mail que não sai porque todo job fica missed: como ler a cron_schedule, conferir o…

12 horas atrás

Gerar slug de URL em PHP: acento, espaço e símbolo fora do endereço

Uma função curta em PHP 8.3 que transforma Camiseta Preta Tamanho GG em camiseta-preta-tamanho-gg, sem depender do locale do servidor.

1 dia atrás

Log de consentimento LGPD: a tabela MySQL que guarda a prova do aceite

O banner registra o clique só no navegador e some. Veja a tabela MySQL e o endpoint que gravam a…

2 dias atrás

Comando CLI Magento 2: criar a classe e registrar no di.xml

A classe do comando existe e o bin/magento list ignora ela. Falta o registro no di.xml: aqui vai a classe…

3 dias atrás

Traduzir o pt_BR.csv do Magento 2 em lote sem perder a coluna de origem

Como traduzir duas mil linhas do pt_BR.csv do Magento 2 lendo com fgetcsv e regravando com fputcsv, sem encostar na…

3 dias atrás

Variação não está disponível no WooCommerce: limpar transients e lookup

Produto variável respondendo "Desculpe, este produto não está disponível" mesmo com a variação ativa: limpe os transients do WooCommerce e…

4 dias atrás