Atributo border-end-start-radius do CSS

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

Definição e uso

border-end-start-radius O atributo é usado para definir o raio do arco entre o final do bloco (block-end) e o início da direção inline (inline-start).

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-end-start-radius O resultado do atributo. Para páginas em inglês, a direção inline é de esquerda para direita, e a direção bloco é para baixo.

Se border-end-start-radius Se o atributo tiver dois valores, o arco será elíptico:

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

Se border-end-start-radius Se o atributo tiver um valor, o arco será circular:

border-end-start-radius: 50px;

CSS border-end-start-radius Atributo 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-end-start-radius A propriedade depende da direção do bloco e da direção inline.

Exemplo

Exemplo 1

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

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

Experimente você mesmo

Exemplo 2: Combinado com a propriedade direction

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

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

Experimente você mesmo

Exemplo 3: Combinado com a propriedade writing-mode

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

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
0	Valor padrão.
length	Define a forma arredondada no final do bloco e no início da direção inline. Veja:Unidades CSS.
%	Define a forma arredondada do bloco usando uma porcentagem da comprimento do elemento na correspondente axe.
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.borderEndStartRadius="50px"