border-block

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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-block es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.

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

border-block puede ser usada para establecer los valores de uno o más border-block-width, border-block-style, y border-block-color estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades border-top y border-bottom o border-right, y border -left dependiendo de los valores definidos para modo de escritura , dirección , y orientación de texto .

Los bordes en la otra dimensión se pueden establecer con border-inline, que establece border-inline-start, y border-inline- fin.

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

El border-block es especificado con uno o más de los siguientes valores, en cualquier orden:

<'border-width'>

El ancho del borde. Mirar border-width.

<'border-style'>

El estilo de la línea del borde. Mirar border-style.

<'color'>

El color del borde. Mirar color.

Sintaxis formal

border-block = 
  <'border-block-start'>  

<border-block-start> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Ejemplo

Contenido HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

Contenido CSS

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

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

Especificaciones

Specification
CSS Logical Properties and Values Level 1
# propdef-border-block

Compatibilidad con navegadores

Mira también