border-radius é uma das primeiras propriedades CSS que a maioria das pessoas aprende e uma das últimas que elas entendem completamente Arredondar todos os quatro cantos de um cartão por 12 pixels é fácil Então um botão precisa ser uma pílula em qualquer largura, um avatar precisa ser um círculo, uma bolha de bate-papo precisa de um canto afiado e, de repente, a ordem abreviada, a diferença entre 50% e 999px, e um raio que o & quot; pára de crescer" tudo importa.
Este guia explica como a propriedade funciona a partir da especificação para cima: o que cada contagem de valores significa, como as porcentagens diferem dos pixels, como os navegadores escalam raios que são muito grandes, como construir formas comuns e por que os cantos arredondados às vezes não aparecem Os exemplos são verificados em relação ao Gerador de raio de borda CSS, que visualiza cada canto ao vivo e gera a abreviação válida mais curta É um dos Ferramentas CSS no Toolz.
tl;dr:
border-radiusarredonda um elemento & #39; s cantos Um valor define todos os quatro cantos, dois valores definir o topo-esquerda/inferior-direita e superior-direita/inferior-esquerda pares, três valores definir superior-esquerda, em seguida, superior-direita e inferior-esquerda juntos, em seguida, inferior-direita, e quatro valores correr no sentido horário a partir de cima-esquerda Os raios pixel são curvas fixas; as porcentagens são medidas contra largura e altura separadamente, de modo50%faz um círculo apenas em um quadrado Quando os raios ao longo de um lado somam mais do que o lado, o navegador escala cada raio para baixo proporcionalmente O gerador raio fronteira lida com a taquigrafia para você, cliente-lado, livre, sem inscrição.
O que faz a propriedade CSS border-radius?
o border-radius propriedade arredonda os cantos externos de um elemento' s caixa de borda Cada canto torna-se um quarto de uma elipse com um raio horizontal e um raio vertical Quando ambos os raios são iguais, o canto é um quarto de círculo.
Está definido no W3C Fundo CSS e Módulo de Fronteiras Nível 3, e tem sido suportado sem prefixo em todos os principais navegadores há mais de uma década, portanto, nenhum prefixo de fornecedor é necessário.
O arredondamento afeta mais do que a linha de borda O elemento & #39; s fundo é cortado para a forma arredondada, box-shadow segue a curva, e nos navegadores modernos o mesmo acontece outline. O conteúdo dentro do elemento não é cortado, a menos que você adicione overflow: hidden, que é a razão mais comum para cantos arredondados parecerem falhar.
Como funciona a taquigrafia do raio de fronteira?
border-radius é uma abreviação para quatro propriedades à mão: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. O número de valores que você fornece decide a quais cantos cada valor se aplica.
| Valores | exemplo | Superior esquerdo | Cima-direita | Inferior-direita | Parte inferior esquerda |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
O padrão é a mesma ordem horária usada por margin e padding, começando do canto superior esquerdo em vez do lado superior Os valores ausentes são preenchidos a partir de seu parceiro diagonal: com dois valores, cópias inferior-direita cópias superior-esquerda e inferior-esquerda cópias superior-direita Com três, cópias inferior-esquerda superior-direita.
O gerador inverte este processo Você define cada canto com seu próprio controle deslizante, e ele escreve o menor número de valores que produzem a mesma forma:
- Todos os quatro cantos iguais dão um valor.
- Superior esquerdo igual a inferior direito, e superior direito igual a inferior esquerdo, dá dois valores.
- Superior-direito igual ao inferior esquerdo (mas a outra diagonal difere) dá três valores.
- Qualquer outra coisa dá quatro.
Uma consequência surpreende as pessoas. Redonde apenas o canto superior esquerdo em 20px e a saída é border-radius: 20px 0px 0px;, não o valor de quatro 20px 0px 0px 0px. Ambos estão corretos; a forma de três valores é mais curta porque o canto superior direito e o canto inferior esquerdo são zero. Cada valor mantém sua unidade, portanto, um canto zero é impresso como 0px.
Qual é a diferença entre PX e % para raio de borda?
Um raio de pixel é um tamanho absoluto Um raio percentual é relativo ao elemento' s tamanho, e as partes horizontal e vertical são medidas separadamente: o raio horizontal contra a largura, o raio vertical contra a altura.
Num quadrado, aqueles são o mesmo número Num retângulo, não são, por isso 50% transforma um quadrado em um círculo, mas um retângulo em uma elipse.
Pegue a caixa de visualização do gerador & #39;s, que tem 224 px de largura e 160 px de altura:
| apreço | Raio horizontal | Raio vertical | Forma |
|---|---|---|---|
16px |
16px | 16px | Retângulo arredondado, cantos circulares |
50% |
112px (50% de 224) | 80px (50% de 160) | Elipse |
25% |
56px | 40px | Retângulo arredondado, cantos elípticos |
999px |
999px, dimensionado para 80px | 999px, dimensionado para 80px | Pílula com pontas redondas |
As outras duas unidades se comportam como pixels depois de resolvidas. em é relativo ao elemento & #39; tamanho da fonte própria e rem para o tamanho da fonte raiz, então 1rem é 16 px com configurações padrão do navegador. Usando em ou rem permite que os cantos sejam dimensionados com o tamanho do texto, o que se adapta aos botões e tags que crescem com sua etiqueta.
No gerador, os controles deslizantes funcionam de 0 a 200 para px, 0 a 50 para % e 0 a 10 para em e rem, em etapas de número inteiro A troca da unidade mantém os números e troca a unidade, então 16 px se torna 16%, não um valor convertido.
Por que um grande raio fronteiriço para de ficar mais redondo?
Porque a especificação não permite curvas de canto para se sobrepor Quando os raios de um lado somam mais do que esse lado' s comprimento, o navegador encolhe cada raio no elemento pelo mesmo fator até que eles se encaixem.
o regra de sobreposição de canto funciona assim Para cada um dos quatro lados, divida o lado' s comprimento pela soma dos dois raios que o tocam Pegue a menor dessas razões, chame-a de f. Se f for menor que 1, multiplique cada raio por f.
Aqui está o cálculo para border-radius: 999px na caixa de visualização 224 por 160:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Cada canto acaba com um raio de 80 px, exatamente metade da altura de 160 px, então as extremidades curtas se tornam semicírculos perfeitos A mesma coisa acontece a 200 px, a parte superior do controle deslizante de pixel: f é 160 /400 = 0,4, e 200 × 0,4 é 80 px novamente Passado metade do lado mais curto, um raio de pixel pára de mudar qualquer coisa.
Seguem-se dois resultados práticos Um botão de pílula pode usar qualquer valor de pixel muito grande, e ele permanece uma pílula em qualquer largura E porque a escala é proporcional em todos os quatro cantos, um único canto de grandes dimensões também encolhe os outros Defina o topo-esquerdo para 999 px e deixe o resto em 20 px, e os cantos de 20 px são reduzidos com ele.
Como você faz formas comuns com raio de borda?
A maioria das formas arredondadas nas interfaces vem de um punhado de receitas O gerador tem predefinições para as comuns.
| Forma | CSS | notas |
|---|---|---|
| Afiado | border-radius: 0px; |
O padrão para a maioria dos elementos |
| Sutil | border-radius: 6px; |
Entradas, pequenos botões |
| Cartão | border-radius: 12px; |
Painéis e cartões |
| Arredondado | border-radius: 16px; |
O gerador e #39;s valor inicial |
| Comprimido | border-radius: 999px; |
Funciona em qualquer largura por meio de escala de sobreposição |
| Círculo | border-radius: 50%; |
Precisa de largura e altura iguais |
| Folha | border-radius: 0px 24px; |
Dois cantos opostos arredondados |
| Blob | border-radius: 60% 40%; |
Forma orgânica de porcentagens desiguais |
| Bolha fala | border-radius: 16px 16px 16px 0px; |
Um canto agudo perto do alto-falante |
| Tabulação | border-radius: 8px 8px 0px 0px; |
Parte superior arredondada, parte inferior plana |
Círculo. Definir 50% num elemento com igual largura e altura Para os avatares, adicione aspect-ratio: 1 e object-fit: cover na imagem, uma foto não quadrada não se estende até formar uma elipse.
Pílula. Use um valor de pixel grande em vez de 50%. Em um botão largo, 50% produz uma elipse com extremidades pontiagudas, pois o raio horizontal tem metade da largura. 999px em vez disso, é dimensionado para metade da altura, dando pontas redondas.
Blob. A predefinição 60% 40% define superior-esquerdo e inferior-direito para 60% e os outros dois para 40% Na caixa de visualização, os raios horizontais ao longo da borda superior são 134,4 px e 89,6 px, que somam exatamente 224 px, portanto, nenhuma escala ocorre e as duas curvas se encontram sem borda reta esquerda entre eles As predefinições podem passar da faixa deslizante: Blob usa 60%, Pill usa 999 px e a saída mantém esses valores até que você mova um controle deslizante.
Bolha e guia de fala. Nenhuma das formas tem um par diagonal correspondente, então ambas precisam de todos os quatro valores Defina os cantos individualmente no gerador e confirma que não existe uma forma mais curta.
Qual é a sintaxe da barra no raio de borda?
Uma barra separa os raios horizontais dos raios verticais, de modo que cada canto pode ser uma elipse não circular com tamanhos que você escolher diretamente.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Os valores de cada lado da barra seguem as mesmas regras de um a quatro que a abreviação normal O gerador Toolz não escreve sintaxe da barra: define um raio por canto, que cobre círculos, pílulas, cartões e bolhas Para formas de ovos e formas de lentes personalizadas, comece a partir da saída do gerador & #39; s e adicione a parte da barra manualmente.
Por que meus cantos arredondados não estão aparecendo?
Quando border-radius parece não fazer nada, a causa é quase sempre uma dessas.
| Sintoma | Causa | Consertar |
|---|---|---|
| Imagem ou criança cutuca para fora dos cantos | As crianças não são cortadas por padrão | Adicionar overflow: hidden para o pai arredondado, ou em volta da criança também |
| Nenhuma mudança visível | Elemento não tem fundo, borda ou sombra | Dê-lhe uma cor de fundo ou borda para que a forma fique visível |
| Os cantos da mesa permanecem quadrados | border-collapse: collapse na mesa |
usar border-collapse: separate por border-spacing: 0, ou arredonde um invólucro |
| O círculo parece um oval | Largura e altura diferem | Defina dimensões iguais ou aspect-ratio: 1 |
| A pílula tem pontas pontiagudas | Usando 50% em um elemento amplo |
Use um grande valor de px como 999px |
| Raio para de aumentar | Escalonamento sobreposto | Esperado; o raio é limitado pela metade do lado mais curto |
| Os cantos dos elementos internos parecem mais grossos | Raio interno é igual ao raio externo dentro do preenchimento | Defina o raio interno para o raio externo menos o preenchimento |
O último é subtil Um cartão com border-radius: 16px e padding: 8px conter uma imagem com o mesmo raio de 16 px parece irregular, porque a curva interna deve ser mais apertada O raio interno que segue a curva externa é 16 menos 8, então 8 px.
Como o raio de borda se combina com sombras e gradientes?
Cantos arredondados raramente são enviados sozinhos Um cartão geralmente tem uma sombra e muitas vezes um fundo gradiente, e ambos seguem a forma arredondada automaticamente.
box-shadow traça a caixa de borda arredondada, de modo que uma sombra suave sob um cartão de 12 px tem cantos arredondados de 12 px sem qualquer trabalho extra O gerador sombra caixa visualiza sombras em um elemento arredondado e o guia sombra caixa explica os valores de deslocamento, desfoque e spread por trás deles.
Os fundos, incluindo gradientes, também são cortados na forma arredondada. Para projetar o preenchimento, use o Gerador gradiente CSS; o Guia gradiente CSS percorre a sintaxe Se o tamanho do canto deve ser dimensionado com a janela de visualização em vez de permanecer fixo, o Gerador de braçadeira CSS constrói a clamp() valor que você pode usar como raio, por exemplo, um cartão que é 8 px em telefones e 20 px em telas largas.
Usando o gerador, passo a passo
- Escolha uma predefinição como Card, Pill, Circle ou Blob, ou comece a partir dos cantos padrão de 16 px.
- Ajustar cantos. O alternador de canto é padrão para Independente, onde cada controle deslizante move apenas seu próprio canto Alterná-lo para Linked para mover todos os quatro juntos.
- Escolha uma unidade: px, %, em ou rem.
- Verifique a antevisão. A caixa de gradiente é atualizada à medida que você arrasta, incluindo escala de sobreposição em valores grandes.
- Copie o CSS. O botão Copiar CSS copia o completo
border-radius:declaração na sua forma mais curta.
Tudo é executado no lado do cliente: a visualização e o código são gerados por JavaScript no seu navegador, nada é carregado e a página continua funcionando offline depois de carregada Quando você estiver pronto, abra o gerador de raio de borda, defina seus cantos e cole a declaração diretamente em sua folha de estilo.
