border-right
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
La propiedad CSS border-right es un a propiedad rápida para dar valores al border-right-width, border-right-style y border-right-color. Estas propiedades establecen un bordederecho del elemento.
Pruébalo
border-right: solid; border-right: dashed red; border-right: 1rem solid; border-right: thick double #32a1ce; border-right: 4mm ridge rgba(211, 220, 50, 0.6); <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> 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; } Como con todas las propiedades rápidas, border-right siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...
border-right-style: dotted; border-right: thick green; ... es en realidad lo mismo que ...
border-right-style: dotted; border-right: none thick green; ... y el valor de border-right-style dado previamente a border-right es ignorado. Puesto que el valor por defecto de border-right-style es none, si no se especifica la parte border-style el resultado es no establecer un borde.
Sintaxis
border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.
Valores
Formal syntax
border-right =
<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
<div>Esta caja tiene un borde en el lado derecho.</div> div { border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } Especificaciones
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |