Atributo border-end-end-radius CSS

Definición y uso

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

Nota:Las 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-end-end-radius El resultado de la propiedad. Para las páginas en inglés, la dirección en línea es de izquierda a derecha, y la dirección de bloque es hacia abajo.

Si border-end-end-radius Si la propiedad tiene dos valores, el radio redondo será elíptico:

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

Si border-end-end-radius La propiedad tiene un valor, el radio redondo será circular:

border-end-end-radius: 50px;

CSS border-end-end-radius Los atributos son similares a border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius y border-top-right-radius Los atributos son muy similares, pero border-end-end-radius El atributo depende de la dirección del bloque y la dirección en línea.

Ejemplo

Ejemplo 1

Añadir bordes redondeados en la extremidad final de la dirección del bloque y en la extremidad final de la dirección en línea para ciertos elementos:

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

Pruebe usted mismo

Ejemplo 2: Combinación con el atributo direction

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

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

Pruebe usted mismo

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

La posición del borde redondeado en la extremidad final de la dirección del bloque y en la extremidad final 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-end-radius: 25px;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente esta propiedad por primera vez.

Páginas relacionadas

Tutoriales:Bordes redondeados CSS

Referencia:Atributo border-bottom-left-radius CSS

Referencia:Atributo border-bottom-right-radius CSS

Referencia:Atributo border-top-left-radius de CSS

Referencia:Atributo border-top-right-radius de CSS

Referencia:Atributo direction de CSS

Referencia:Atributo text-orientation de CSS

Referencia:Atributo writing-mode de CSS