border-inline-end

La propiedad de CSS  border-inline-end es una propiedad abreviada para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos. 

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Sintaxis

border-inline-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

border-inline-end puede ser usado para establecer los valores de uno o más de border-inline-end-width, border-inline-end-style, y border-inline-end-color. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades border-top, border-right, border-bottom, o border-left dependiendo de los valores definidos por writing-mode, direction, y text-orientation.

Propiedades relacionadas son border-block-start, border-block-end, and border-inline-start, que definen los otros bordes del elemento.

Valores

El border-inline-end es especificado con uno o más de los siguientes valores, en cualquier orden:

<'border-width'>

El ancho del borde. Mira border-width.

<'border-style'>

La línea de estilo del borde. Mira border-style.

<'color'>

El color del borde. Mira color.

Sintaxis formal

<'border-top-width'> || <'border-top-style'> || <'color'>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplo

Contenido HTML

<div>
  <p class="exampleText">Example text</p>
</div>

Contenido CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-end: 5px dashed blue;
}

Especificación

Compatibilidad en navegadores

Mira también

• Esta propiedad se asigna a una de las propiedades del borde físico:border-top, border-right, border-bottom, o border-left.
• writing-mode, direction, text-orientation