mozilla

Revision 328945 of border-right

  • Revision slug: CSS/border-right
  • Revision title: border-right
  • Revision id: 328945
  • 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)}}
 
<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)}}
 
<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)}}

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()}}

{{ languages( { "de": "de/CSS/border-right", "fr": "fr/CSS/border-right", "ja": "ja/CSS/border-right", "pl": "pl/CSS/border-right", "pt": "pt/CSS/border-right" } ) }} 

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>
  border-right-style: dotted;
  border-right: thick green;
</pre>
<p>is actually the same as</p>
<pre>
  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 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 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>
<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>
<p>{{ languages( { "de": "de/CSS/border-right", "fr": "fr/CSS/border-right", "ja": "ja/CSS/border-right", "pl": "pl/CSS/border-right", "pt": "pt/CSS/border-right" } ) }}&nbsp;</p>
Revert to this revision