Atributo border-start-end-radius de CSS

Página anterior border-spacing
Página siguiente border-start-start-radius

Definición y uso

border-start-end-radius La propiedad se utiliza para definir el radio del borde redondeado entre el inicio del bloque del elemento (block-start) y el final de la dirección en línea (inline-end).

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

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

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

si border-start-end-radius Si la propiedad tiene un valor, el radio del borde redondeado será circular:

border-start-end-radius: 50px;

CSS border-start-end-radius propiedad de border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius y border-top-right-radius Las propiedades son muy similares, pero border-start-end-radius La propiedad depende de la dirección del bloque y la dirección en línea.

Ejemplo

Ejemplo 1

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

Pruebe usted mismo

Ejemplo 2: Combinación con la propiedad direction

La posición de los bordes redondeados en el inicio de la dirección del bloque y en el final de la dirección en línea depende de direction Efecto de la propiedad:

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

Pruebe usted mismo

Ejemplo 3: Combinación con la propiedad writing-mode

La posición de los bordes redondeados en el inicio de la dirección del bloque y en el final de la dirección en línea depende de writing-mode Efecto de la propiedad:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
0	Valor predeterminado.
longitud	Define la forma de los bordes redondeados en el inicio de la dirección del bloque y en el final de la dirección en línea. Ver:Unidades de CSS.
%	Define la forma de los bordes redondeados en porcentaje de la longitud del elemento en el eje correspondiente.
initial	Establezca esta propiedad en su valor predeterminado. Ver: initial.
inherit	Hereda esta propiedad de su elemento padre. Ver: inherit.

Detalles técnicos

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