border-block-end

Experimental

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

La propiedad CSS border-block-end es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. border-block-end puede ser usada para establecer los valores de una o más de las siguientes propiedades: border-block-end-width, border-block-end-style, border-block-end-color. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. 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.

border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;

Está relacionada con border-block-start, border-inline-start, y border-inline-end, las cuales definen el borde contrario del elemento.

Valor inicialas each of the properties of the shorthand:
Applies toall elements
Heredableno
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Sintaxis

Valores

Una o más de los siguientes, en cualquier orden:

<'border-width'>
Véase border-width
<'border-style'>
Véase border-style
<'color'>
Véase 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">Texto de ejemplo</p>
</div>

Contenido CSS

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

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

Especificación

Especificación Estatus Comentarios
CSS Logical Properties and Values Level 1
La definición de 'border-block-end' en esta especificación.		 Editor's Draft Definición inicial

Compatibilidad en navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico Sin soporte 41.0 (41.0)[1] Sin soporte Sin soporte Sin soporte
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico Sin soporte 41.0 (41.0)[1] Sin soporte Sin soporte Sin soporte

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.

Mira también