border-block-end

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 inicial	as each of the properties of the shorthand: `border-top-width`: `medium` `border-top-style`: `none` `border-top-color`: `currentcolor`
Applies to	all elements
Heredable	no
Media	visual
Valor calculado	as each of the properties of the shorthand: `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden` `border-top-style`: como se especifica `border-top-color`: computed color
Animation type	discrete
Canonical order	el orden único no-ambigüo definido por la gramática formal

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!

Escritorio
Móvil

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

Las propiedades físicas mapeadas: border-top, border-right, border-bottom, y border-left
writing-mode, direction, text-orientation