This translation is incomplete. Please help translate this article from English

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.

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.


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.


Ver border-right-width.
Ver border-right-style.
Ver border-right-color.

Formal syntax

<line-width> || <line-style> || <color>

<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>

<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>? )

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>


  Esta caja tiene un borde en el lado derecho.
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;


Specificació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 inicialas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Compatibilitidad del navegador

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
border-rightChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 5.5Opera Soporte completo 9.2Safari Soporte completo 1WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 14Opera Android Soporte completo SiSafari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0


Soporte completo  
Soporte completo