border-inline-start

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS  border-inline-start es una propiedad abreviada para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.

Sintaxis

border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;

border-inline-start es especificado con uno o más de border-inline-start-width, border-inline-start-style, and border-inline-start-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-topborder-rightborder-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-end, que definen los otros bordes del elemento.

Valor inicialas each of the properties of the shorthand:
Applies toall elements
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Valores

El border-inline-start es especificado con uno o más de los sigueintes 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-start: 5px dashed blue;
}

Especificación

Especificación Estado Comentario
CSS Logical Properties and Values Level 1
La definición de 'border-inline-start' en esta especificación.
Editor's Draft Definición inicial.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
border-inline-startChrome Soporte completo 69Edge Sin soporte NoFirefox Soporte completo 41
Soporte completo 41
Soporte completo 38
Deshabilitado
Deshabilitado From version 38: this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 56Safari Soporte completo 12.1WebView Android Soporte completo 69Chrome Android Soporte completo 69Firefox Android Soporte completo 41
Soporte completo 41
Soporte completo 38
Deshabilitado
Deshabilitado From version 38: this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 48Safari iOS Soporte completo 12.2Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Mira también