Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
border-inline-start
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
Experimental:Esta es unatecnología experimental
Comprueba laTabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La propiedad deCSSborder-inline-start es unapropiedad abreviada para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.
In this article
Pruébalo
border-inline-start: solid;writing-mode: horizontal-tb;border-inline-start: dashed red;writing-mode: vertical-rl;border-inline-start: 1rem solid;writing-mode: horizontal-tb;direction: rtl;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override;}Sintaxis
border-inline-start: 1px;border-inline-start: 2px dotted;border-inline-start: medium dashed green;border-inline-start es especificado con uno o más deborder-inline-start-width,border-inline-start-style, andborder-inline-start-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 propiedadesborder-top,border-right,border-bottom, oborder-left dependiendo de los valores definidos porwriting-mode,direction, ytext-orientation.
Propiedades relacionadas sonborder-block-start,border-block-end, andborder-inline-end, 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
Elborder-inline-start es especificado con uno o más de los sigueintes 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-inline-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
<div> <p>Example text</p></div>Contenido CSS
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-rl; border-inline-start: 5px dashed blue;}Especificaciones
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1> # border-shorthands> |
Compatibilidad con navegadores
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