Atributo border-end-start-radius de CSS

Página anterior border-end-end-radius
Página siguiente border-image

Definición y uso

border-end-start-radius El atributo se utiliza para definir el radio del borde arredondado entre el extremo del bloque del elemento (block-end) y el inicio de la dirección del texto en línea (inline-start).

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

Si border-end-start-radius Si el atributo tiene dos valores, el radio del borde arredondado será elíptico:

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

Si border-end-start-radius Si el atributo tiene un valor, el radio del borde arredondado será circular:

border-end-start-radius: 50px;

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

Ejemplo

Ejemplo 1

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

Intente usted mismo

Ejemplo 2: Combinación con el atributo direction

La posición del arco redondeado en el extremo final del bloque y en el inicio de la dirección en línea está influenciada por direction Efecto del atributo:

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

Intente usted mismo

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

La posición del arco redondeado en el extremo final del bloque y en el inicio de la dirección en línea está influenciada por writing-mode Efecto del atributo:

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

Intente usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
0	Valor predeterminado.
longitud	Defina la forma del arco redondeado en el extremo final del bloque y en el inicio de la dirección en línea. Consulte:Unidades CSS.
%	Defina la forma del arco redondeado del bloque con un porcentaje de la longitud del elemento en el eje correspondiente.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado:	0
Herencia:	No
Producción de animación:	Compatibilidad. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderEndStartRadius="50px"