---
title: border-bottom-style
slug: Web/CSS/border-bottom-style
tags:
  - CSS
  - 'CSS:Dokumentacje'
  - Dokumentacje
  - Wszystkie_kategorie
translation_of: Web/CSS/border-bottom-style
---
<p>{{ CSSRef() }}</p>

<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2>

<p><code>border-bottom-style</code> ustawia styl linii dolnego obramowania bloku.</p>

<ul>
 <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li>
 <li>Stosowana do: wszystkich elementów</li>
 <li>{{ Xref_cssinherited() }}: nie</li>
 <li>Procenty: niedostępne</li>
 <li>Media: {{ Xref_cssvisual() }}</li>
 <li>{{ Xref_csscomputed() }}: określone</li>
</ul>

<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2>

<pre class="eval">border-bottom-style: &lt;border-style&gt; | inherit
</pre>

<h2 id="Warto.C5.9Bci_.3Cborder-style.3E" name="Warto.C5.9Bci_.3Cborder-style.3E">Wartości &lt;border-style&gt;</h2>

<dl>
 <dt>none </dt>
 <dd>Bez obramowania.</dd>
 <dt>hidden </dt>
 <dd>Podobnie jak 'none', oprócz sytuacji konfliktu rozdzielczości obramowania dla elementów tabeli.</dd>
 <dt>dotted </dt>
 <dd>Seria kropek.</dd>
 <dt>dashed </dt>
 <dd>Seria krótkich kresek lub odcinków linii.</dd>
 <dt>solid </dt>
 <dd>Pojedyncza, prosta, ciągła linia.</dd>
 <dt>double </dt>
 <dd>Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako <code>border-width</code>.</dd>
 <dt>groove </dt>
 <dd>Efekt wyrzeźbienia.</dd>
 <dt>ridge </dt>
 <dd>Przeciwieństwo <code>groove</code>. Obramowanie wydaje się trójwymiarowe (zapowiadane).</dd>
 <dt>inset </dt>
 <dd>Sprawia wrażenie, że blok jest zapadnięty.</dd>
 <dt>outset </dt>
 <dd>Przeciwieństwo <code>inset</code>. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).</dd>
</dl>

<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2>

<ul>
 <li>{{ Cssxref("border-left-style") }}</li>
 <li>{{ Cssxref("border-right-style") }}</li>
 <li>{{ Cssxref("border-top-style") }}</li>
 <li>{{ Cssxref("border-style") }}</li>
</ul>

<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2>

<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p>

<pre>element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}
</pre>

<h2 id="Notatki" name="Notatki">Notatki</h2>

<p>Jeżeli wartość <code>border-style</code> nie jest ustawiona, wtedy twoje obramowanie nie pojawi się, ponieważ domyślna wartość jest ustawiona na <code>none</code>.</p>

<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-bottom-style', 'border-bottom-style') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>No significant change</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Initial definition</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</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.0</td>
   <td>5.5</td>
   <td>9.2</td>
   <td>1.0</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>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>7.0</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_Also" name="See_Also">See also</h2>

<ul>
 <li>The other style-related border properties: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}.</li>
 <li>The other bottom-border-related properties: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}.</li>
</ul>