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;


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

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 14Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0


Soporte completo  
Soporte completo