border-inline-end
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-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.
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-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
Especificación | Estado | Comentario |
---|---|---|
CSS Logical Properties and Values Level 1 La definición de 'border-inline-end' 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