-
Notifications
You must be signed in to change notification settings - Fork 3
Modificador raio borda
Vitor Brandão edited this page May 18, 2023
·
2 revisions
O modificador FolEs raio-borda é uma propriedade de atribuição abreviada que arredonda os cantos da borda externa de um elemento. Você pode utilizar esse modificador para definir um único raio para fazer cantos circulares ou dois raios para fazer cantos elípticos.
/* A sintaxe deste modificador aceita de 1 a 4 valores */
/* Um único valor define o raio dos 4 lados */
raio-borda: 10px;
/* bordas: superior-esquerda-e-inferior-direita | superior-direita-e-inferior-esquerda */
raio-borda: 10px 5%;
/* bordas: superior-esquerda | superior-direita-e-inferior-esquerda | inferior-direita */
raio-borda: 2px 4px 2px;
/* bordas: superior-esquerda | superior-direita | inferior-direita | inferior-esquerda */
raio-borda: 1px 0 3px 4px;
/* valor do primeiro raio / raio geral */
raio-borda: 10px / 20px;
/* valor do primeiro raio / borda superior-esquerda-e-inferior-direita | borda superior-direita-e-inferior-esquerda */
raio-borda: 10px 5% / 20px 30px;
/* Valores globais */
raio-borda: herdar;
raio-borda: inicial;
raio-borda: reverter;
raio-borda: reverter-camada;
raio-borda: desarmar;
Esta propriedade é um atalho para as seguintes propriedades FolEs:
-
raio-direito-borda-superior; -
raio-esquerdo-borda-superior; -
raio-direito-borda-inferior; -
raio-esquerdo-borda-inferior.
raio-borda é traduzido para border-radius.