border-right
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 borde derecho del elemento.
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.
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
<br-width>
- Ver
border-right-width
. <br-style>
- Ver
border-right-style
. <color>
- Ver
border-right-color
.
Formal syntax
<line-width> || <line-style> || <color>where
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<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
<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
Especificación | Estado | Comentario |
---|---|---|
CSS Backgrounds and Borders Module Level 3 La definición de 'border-right' en esta especificación. |
Candidate Recommendation | No direct changes, though the modification of values for the border-right-color do apply to it. |
CSS Level 2 (Revision 1) La definición de 'border-right' en esta especificación. |
Recommendation | No significant changes. |
CSS Level 1 La definición de 'border-right' en esta especificación. |
Recommendation | Initial definition |
Valor inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Heredable | no |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Compatibilitidad del navegador
BCD tables only load in the browser