border-block-start

La propiedad de CSS border-block-start es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque inicial 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-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;

border-block-start puede ser usado para establecer los valores de uno o más de border-block-start-width, border-block-start-style, y border-block-start-color. El borde físico al que se asigna 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 para writing-mode, direction, y text-orientation.

Propiedades relacionadas son border-block-end, border-inline-start, y border-inline-end, que definen los otros bordes del elemento.

Valores

El border-block-start 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'>

El estilo de la línea 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-block-start: 5px dashed blue;
}

Especificación

Compatibilidad en navegadores

Mira también

• Esta propiedad se asigna a una de las propiedades del borde físico: border-top, border-right, border-bottom, o border-left.
• writing-mode, direction, text-orientation