Experimental
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.
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-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-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-end
, que definen los otros bordes del elemento.
Valor inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Heredable | no |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand: |
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
BCD tables only load in the browser
Mira también
- Esta propiedad se asigna a una de las propiedades del borde físico:
border-top
,border-right
,border-bottom
, oborder-left
. writing-mode
,direction
,text-orientation