Atributo border-start-start-radius de CSS

Página anterior border-start-end-radius
Página siguiente border-style

Definición y uso

border-start-start-radius La propiedad se utiliza para definir el radio del borde arredondado entre el inicio del bloque (block-start) y el inicio en línea (inline-start) del elemento.

Nota:propiedades CSS relacionadas writing-mode,text-orientation y direction Define la dirección de bloque y la dirección en línea. Por eso, estas propiedades también afectan border-start-start-radius el resultado de la propiedad. Para las páginas en inglés, la dirección de alineación en línea es de izquierda a derecha, y la dirección de bloque es hacia abajo.

si border-start-start-radius Si una propiedad tiene dos valores, el radio del borde arredondado será elíptico:

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

si border-start-start-radius Si una propiedad tiene un valor, el radio del borde arredondado será circular:

border-start-start-radius: 50px;

CSS border-start-start-radius propiedad de border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius y border-top-right-radius Es muy similar, pero border-start-start-radius El atributo depende de la dirección del bloque y la dirección en línea.

Ejemplo

Ejemplo 1

Añadir arcos redondeados en el punto de partida de la dirección del bloque y la dirección en línea para ciertos 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;
}

Pruebe usted mismo

Ejemplo 2: Combinación con el atributo direction

La posición del arco redondeado en el punto de partida de la dirección del bloque y la dirección en línea está influenciada por direction Impacto del atributo:

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

Pruebe usted mismo

Ejemplo 3: Combinación con el atributo writing-mode

La posición del arco redondeado en el punto de partida de la dirección del bloque y la dirección en línea está influenciada por writing-mode Impacto del atributo:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
0	Valor por defecto.
longitud	Define la forma del arco redondeado en el punto de partida de la dirección del bloque y la dirección en línea. Vea:Unidades CSS.
%	Define esta forma de arco redondeado en porcentaje de la longitud del elemento en el eje correspondiente.
initial	Establezca este atributo en su valor por defecto. Vea: initial.
inherit	Hereda este atributo de su elemento padre. Vea: inherit.

Detalles técnicos

Valor por defecto:	0
Herencia:	No
Creación de animaciones:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderStartStartRadius="50px"