Atributo border-end-end-radius do CSS

Página anterior border-color
Próxima página border-end-start-radius

Definição e uso

border-end-end-radius A propriedade é usada para definir o raio do arco entre o final do bloco (block-end) e o final inline (inline-end) do elemento.

Atenção:propriedades CSS relacionadas writing-mode,text-orientation e direction Define a direção do bloco e a direção inline. É por isso que essas propriedades também afetam border-end-end-radius O resultado da propriedade. Para páginas em inglês, a direção inline é de esquerda para direita, e a direção bloco é para baixo.

Se border-end-end-radius A propriedade possui dois valores, então o arco será elíptico:

border-end-end-radius: 50px 100px;

Se border-end-end-radius A propriedade possui um valor, então o arco será circular:

border-end-end-radius: 50px;

CSS border-end-end-radius as propriedades são semelhantes, mas border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius e border-top-right-radius É muito semelhante, mas border-end-end-radius A propriedade depende da direção do bloco e da direção inline.

Exemplo

Exemplo 1

Adicionar arredondamentos nos cantos no final da direção do bloco e da direção inline para alguns elementos:

#example1 {
  background-color: lightblue;
  border-end-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 2: Combinado com a propriedade direction

A posição do canto arredondado no final da direção do bloco e da direção inline é afetada por direction Impacto da propriedade:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-end-radius: 25px;
}

Experimente você mesmo

Exemplo 3: Combinado com a propriedade writing-mode

A posição do canto arredondado no final da direção do bloco e da direção inline é afetada por writing-mode Impacto da propriedade:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-end-radius: 25px;
}

Experimente você mesmo

Sintaxe do CSS

border-end-end-radius: 0|length|initial|inherit;

Valor da propriedade

Valor	Descrição
0	Valor padrão.
length	Define a forma arredondada do canto no final da direção do bloco e da direção inline.
%	Define a forma arredondada do canto usando uma porcentagem da largura do elemento na respectiva dimensão.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	0
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.borderEndEndRadius="50px"