CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS outline-width

La proprietà CSS outline-width imposta lo spessore del contorno (CSS3)

La proprietà outline-width consente di controllare lo spessore del contorno attorno a un elemento. Può essere specificata con valori numerici (px, em, ecc.) o parole chiave (thin, medium, thick). Affinché il contorno sia visibile, è necessario specificare anche outline-style.

Sintassi

outline-width: length | keyword;

Significato dei valori principali:

  • length: specifica uno spessore personalizzato, ad esempio 2px, 0.5em, 4pt, ecc.

  • thin: uno spessore sottile predefinito dal browser.

  • medium: valore predefinito, di spessore medio.

  • thick: uno spessore più marcato.


Esempio proprietà: outline-width


Codice Esempio: outline-width

CODE: CSSpreleva codice
  1. .outline-width-example {
  2.   width: 300px;
  3.   height: 150px;
  4.   outline-width: 6px;
  5.   outline-style: solid;
  6.   outline-color: #4caf50;
  7.   padding: 20px;
  8.   background-color: #ffffff;
  9.   font-size: 18px;
  10.   text-align: center;
  11.   border-radius: 6px;
  12.   color: #333;
  13. }

Contenuto Esempio: outline-width

Esempio di utilizzo di outline-width

In questo esempio, la proprietà outline-width viene utilizzata per impostare uno spessore personalizzato al contorno:


Contorno con spessore personalizzato 6px

CSS e HTML per il contorno con spessore personalizzato:

  
  <style>
    .outline-width-example {
      width: 300px;
      height: 150px;
      outline-width: 6px; /* Spessore del contorno */
      outline-style: solid;
      outline-color: #4caf50;
      padding: 20px;
      background-color: #ffffff;
      font-size: 18px;
      text-align: center;
      border-radius: 6px;
      color: #333;
    }
  </style>
  
  <div class="outline-width-example">
    Contorno con spessore personalizzato 6px
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies