---
title: border-style
slug: Web/CSS/border-style
translation_of: Web/CSS/border-style
---
<div>{{CSSRef}}</div>

<div>La proprietà <strong><code>border-style</code></strong> è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.</div>

<div></div>

<pre class="brush: css no-line-numbers">/* Applicato a tutti 4 i lati */
border-style: dashed;

/* verticale | orrizzontale */
border-style: dotted solid;

/* superiore | orizzontale | inferiore */
border-style: hidden double dashed;

/* superiore | destra | inferiore | sinistra */
border-style: none solid dotted dashed;

/* Valori globali */
border-style: inherit;
border-style: initial;
border-style: unset;
</pre>

<div class="note"><strong>Nota:</strong> Il valore di default di <code>border-style</code> è <code>none</code>. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il <span style="white-space: nowrap;">{{ Cssxref("border-color") }},</span> non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia <code>none</code> o <code>hidden</code>.</div>

<p>{{cssinfo}}</p>

<h2 id="Sintassi">Sintassi</h2>

<p>La proprietà <code>border-style</code> può essere specificata usando uno, due, tre o quattro valori.</p>

<ul>
 <li><strong>Un solo</strong> valore viene applicato a tutti e quattro i bordi.</li>
 <li>Specificando<strong> due </strong>valori, il primo verrà applicato <strong>top e bottom</strong>, il secondo come <strong>left e right</strong>.</li>
 <li>Con <strong>tre</strong> valori, il primo verrà applicato come <strong>top</strong>, il secondo a <strong>left e right</strong> e il terzo al <strong>bottom</strong>.</li>
 <li>Specificando <strong>quattro</strong> valori si applicheranno <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> e <strong>left</strong> in questo ordine (orario).</li>
</ul>

<p>Ogni valore è una keyword scelta dalla seguente lista.</p>

<h3 id="Valori">Valori</h3>

<dl>
 <dt><code>&lt;br-style&gt;</code></dt>
 <dd>E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori:
 <table class="standard-table">
  <tbody>
   <tr>
    <td style="vertical-align: middle;"><code>none</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore <code>none</code> ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>hidden</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>dotted</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>dashed</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>solid</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra una singola dritta e solida linea.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>double</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>groove</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto intagliato. È l'opposto di <code>ridge</code>. </td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>ridge</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di  <code>groove</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>inset</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Mostra un bordo che fa apparire il box incassato.<br>
     E' l'opposto di <code>outset.</code> Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>groove</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>outset</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">
     <p>Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di <code>inset</code>. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>ridge</code>.</p>
    </td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Sintassi_Formale">Sintassi Formale</h3>

{{csssyntax}}

<h2 id="Esempi">Esempi</h2>

<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabella con tutti i valori della proprietà</h3>

<p>Ecco un esempio con tutti i valori che la proprietà può assumere</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;table&gt;
    &lt;tr&gt;
        &lt;td class="b1"&gt;none&lt;/td&gt;
        &lt;td class="b2"&gt;hidden&lt;/td&gt;
        &lt;td class="b3"&gt;dotted&lt;/td&gt;
        &lt;td class="b4"&gt;dashed&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="b5"&gt;solid&lt;/td&gt;
        &lt;td class="b6"&gt;double&lt;/td&gt;
        &lt;td class="b7"&gt;groove&lt;/td&gt;
        &lt;td class="b8"&gt;ridge&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="b9"&gt;inset&lt;/td&gt;
        &lt;td class="b10"&gt;outset&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">/* Definizione stile tabella */
table {
    border-width: 3px;
    background-color: #52E396;
}
tr, td {
    padding: 2px;
}

/* border-style classi di esempio */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}</pre>

<h4 id="Output">Output</h4>

<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p>

<h2 id="Specific​he">Specific​he</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-style', 'border-style') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>No change</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Added <code>hidden</code></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("css.properties.border-style")}}</p>

<h2 id="Vedi_anche">Vedi anche</h2>

<ul>
 <li>Le proprietà shorthand CSS relative al bordo: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li>
</ul>