border-right

  • Revision slug: CSS/border-right
  • Revision title: border-right
  • Revision id: 328987
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border-right CSS property is a shorthand that sets the values of {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, and {{ Cssxref("border-right-width") }}. These properties describe the right border of elements.

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

As with all shorthand properties, border-right always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:

  border-right-style: dotted;
  border-right: thick green;

is actually the same as

  border-right-style: dotted;
  border-right: none thick green;

and the value of {{ Cssxref("border-right-style") }} given before border-right is ignored.

Since the default value of {{ Cssxref("border-right-style") }} is none, not specifying the border-style part of the value means that the property specifies its default value which is none and means no border.

  • {{ Xref_cssinitial() }} see individual properties for details
  • Applies to all elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} see individual properties

Syntax

border-right: [ <border-width> || <border-style> || <border-color> ] | inherit

where:

<border-width> 
See {{ Cssxref("border-right-width") }}.
<border-style> 
See {{ Cssxref("border-right-style") }}.
<border-color> 
See {{ Cssxref("border-right-color") }}.

Examples

The three component of a right borders can be defined: width, style and color.
 
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample { 
  border-right: 3px solid #000; 
} 
{{EmbedLiveSample("Solid_black_border",120,120)}}
The style can be set to any {{cssxref("border-right-style")}} value.
 
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample { 
  border-right: 3px dotted #000; 
} 
{{EmbedLiveSample("Dotted_black_border",120,120)}}
The color can be set to any {{cssxref("border-right-color")}} value.
 
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample { 
  border-right: 3px solid #f00; 
} 
{{EmbedLiveSample("Solid_red_border",120,120)}}
The width can be set to any {{cssxref("border-right-width")}} value.
 
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample { 
  border-right: 1px solid #000; 
} 
{{EmbedLiveSample("Solid_narrow_border",120,120)}}
The values can be declared in any order.
 
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample { 
  border-right: blue solid 2px; 
} 
{{EmbedLiveSample("Any_border",120,120)}}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#border-right', 'border-right') }} {{ Spec2('CSS3 Backgrounds') }} No direct changes, though the modification of values for the {{ cssxref("border-right-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right') }} {{ Spec2('CSS2.1') }} No significant changes
{{ SpecName('CSS1', '#border-right', 'border-right') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

  • {{ CSS_Reference:Border-right() }}
  • {{ CSS_Reference:Border()}}

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>border-right</code> <a href="/en/CSS" title="CSS">CSS</a> property is a shorthand that sets the values of {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, and {{ Cssxref("border-right-width") }}. These properties describe the right border of elements.</p>
<p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p>
<p>As with all shorthand properties, <code>border-right</code> always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:</p>
<pre class="brush: css">
  border-right-style: dotted;
  border-right: thick green;
</pre>
<p>is actually the same as</p>
<pre class="brush: css">
  border-right-style: dotted;
  border-right: none thick green;
</pre>
<p>and the value of {{ Cssxref("border-right-style") }} given before <code>border-right</code> is ignored.</p>
<p>Since the default value of {{ Cssxref("border-right-style") }} is <code>none</code>, not specifying the <code>border-style</code> part of the value means that the property specifies its default value which is <code>none</code> and means no border.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> see individual properties for details</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> see individual properties</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
border-right: [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] | <em>inherit</em></pre>
<p>where:</p>
<dl>
  <dt>
    &lt;border-width&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-right-width") }}.</dd>
  <dt>
    &lt;border-style&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-right-style") }}.</dd>
  <dt>
    &lt;border-color&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-right-color") }}.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<div id="Solid_black_border" style="width:26em;display:inline-block;margin-right:1px;margin-bottom:1px">
  <div>
    The three component of a right borders can be defined: width, style and color.</div>
  <div style="display:none">
    <pre class="brush:html">
 
&lt;div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"&gt;&lt;/div&gt;
  </pre>
  </div>
  <pre class="brush:css; highlight:[2]">
.sample { 
  border-right: 3px solid #000; 
} </pre>
  <div class="centered">
    {{EmbedLiveSample("Solid_black_border",120,120)}}</div>
</div>
<div id="Dotted_black_border" style="width:26em;display:inline-block;margin-right:1px;margin-bottom:1px">
  <div>
    The style can be set to any {{cssxref("border-right-style")}} value.</div>
  <div style="display:none">
    <pre class="brush:html">
 
&lt;div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"&gt;&lt;/div&gt;
  </pre>
  </div>
  <pre class="brush:css; highlight:[2]">
.sample { 
  border-right: 3px dotted #000; 
} </pre>
  <div class="centered">
    {{EmbedLiveSample("Dotted_black_border",120,120)}}</div>
</div>
<div id="Solid_red_border" style="width:26em;display:inline-block;margin-right:1px;margin-bottom:1px">
  <div>
    The color can be set to any {{cssxref("border-right-color")}} value.</div>
  <div style="display:none">
    <pre class="brush:html">
 
&lt;div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"&gt;&lt;/div&gt;
  </pre>
  </div>
  <pre class="brush:css; highlight:[2]">
.sample { 
  border-right: 3px solid #f00; 
} </pre>
  <div class="centered">
    {{EmbedLiveSample("Solid_red_border",120,120)}}</div>
</div>
<div id="Solid_narrow_border" style="width:26em;display:inline-block;margin-right:1px;margin-bottom:1px">
  <div>
    The width can be set to any {{cssxref("border-right-width")}} value.</div>
  <div style="display:none">
    <pre class="brush:html">
 
&lt;div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"&gt;&lt;/div&gt;
  </pre>
  </div>
  <pre class="brush:css; highlight:[2]">
.sample { 
  border-right: 1px solid #000; 
} </pre>
  <div class="centered">
    {{EmbedLiveSample("Solid_narrow_border",120,120)}}</div>
</div>
<div id="Any_border" style="width:26em;display:inline-block;margin-right:1px;margin-bottom:1px">
  <div>
    The values can be declared in any order.</div>
  <div style="display:none">
    <pre class="brush:html">
 
&lt;div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"&gt;&lt;/div&gt;
  </pre>
  </div>
  <pre class="brush:css; highlight:[2]">
.sample { 
  border-right: blue solid 2px; 
} </pre>
  <div class="centered">
    {{EmbedLiveSample("Any_border",120,120)}}</div>
</div>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-right', 'border-right') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>No direct changes, though the modification of values for the {{ cssxref("border-right-color") }} do apply to it.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>No significant changes</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#border-right', 'border-right') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Border-right() }}</li>
  <li>{{ CSS_Reference:Border()}}</li>
</ul>
Revert to this revision