Atributo border-start-start-radius CSS

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

Definição e uso

border-start-start-radius A propriedade é usada para definir o raio do arco entre o início do bloco (block-start) e o início inline (inline-start) do elemento.

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

se border-start-start-radius Se a propriedade tiver dois valores, o arco será elíptico:

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

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

border-start-start-radius: 50px;

CSS border-start-start-radius propriedade e border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius e border-top-right-radius é muito semelhante, mas border-start-start-radius A propriedade depende da direção do bloco e da direção inline.

Exemplo

Exemplo 1

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

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

Experimente você mesmo

Exemplo 2: Combinando a propriedade direction

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

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

Experimente você mesmo

Exemplo 3: Combinando a propriedade writing-mode

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

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

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