A propriedade border-start-end-radius do CSS

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

Definição e uso

border-start-end-radius a propriedade é usada para definir o raio do arco entre o início do bloco e o final inline do elemento.

Atenção:propriedades CSS relacionadas writing-mode,text-orientation e direction define a direção bloco e inline. Por isso, essas propriedades também afetam border-start-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-start-end-radius se a propriedade tiver dois valores, o arco será elíptico:

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

se border-start-end-radius se a propriedade tiver um valor, o arco será circular:

border-start-end-radius: 50px;

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

Exemplo

Exemplo 1

Adicione arcos arredondados no início da direção do bloco e no final da direção inline para alguns elementos:

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

Experimente você mesmo

Exemplo 2: Combinando a propriedade direction

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

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

Experimente você mesmo

Exemplo 3: Combinando a propriedade writing-mode

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

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
0	Valor padrão.
length	Define a forma arredondada no início da direção do bloco e no final da direção inline. Veja:Unidades CSS.
%	Define a forma arredondada do canto, usando 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.borderStartEndRadius="50px"