Atributo border-inline CSS

Definición y uso

border-inline La propiedad es una abreviatura de las siguientes propiedades:

• border-inline-width
• border-inline-style(Obligatorio)
• border-inline-color

Si se omite el valor del color o del ancho, se utilizará el valor predeterminado.

CSS border-inline propiedad con border Las propiedades son muy similares, pero border-inline La propiedad depende de la dirección inline.

Nota:y las propiedades CSS relacionadas writing-mode,text-orientation y direction Define la dirección inline. Esto afecta el inicio y el final de una línea, así como border-inline El efecto de la propiedad. Para las páginas en inglés, la dirección inline es de izquierda a derecha, y la dirección de bloque es hacia abajo.

Ejemplo

Ejemplo 1

Establece el estilo, color y anchura del borde para diferentes elementos en la dirección inline:

h1 {
  border-inline: 5px solid red;
}
h2 {
  border-inline: 4px dotted blue;
}
div {
  border-inline: double;
}

Prueba tu mismo

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

El borde en la posición de inicio y final de la dirección inline se ve afectado por writing-mode Efecto de la propiedad:

div {
  writing-mode: vertical-rl;
  border-inline: hotpink dashed 8px;
}

Prueba tu mismo

Sintaxis de CSS

border-inline: border-inline-width border-inline-style border-inline-color |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 la propiedad por primera vez.

páginas relacionadas

Tutoriales:Borde de CSS

Referencia:Atributo border CSS

Referencia:Atributo border-inline-color CSS

Referencia:Atributo border-inline-style de CSS

Referencia:Atributo border-inline-width de CSS

Referencia:Atributo direction de CSS

Referencia:Atributo text-orientation de CSS

Referencia:Atributo writing-mode de CSS