CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS outline

La proprietà CSS outline imposta un contorno attorno all'elemento (CSS3)

La proprietà outline permette di definire in una singola dichiarazione il colore, lo stile e la larghezza del contorno esterno di un elemento. A differenza dei bordi, il contorno non influisce sulla posizione degli altri elementi e può risultare utile per evidenziare elementi al focus.

Sintassi

outline: outline-color outline-style outline-width;

Significato dei valori principali:

  • outline-color: definisce il colore del contorno. Accetta valori di colore CSS validi come red, #ff0000, rgb(255,0,0), ecc.

  • outline-style: definisce lo stile del contorno. Valori comuni: solid, dashed, dotted, double, none.

  • outline-width: definisce la larghezza del contorno. Può essere specificata in px, em, rem, ecc., oppure usare parole chiave come thin, medium, thick.


Esempio proprietà: outline


Codice Esempio: outline

CODE: CSSpreleva codice
  1. .outline-example {
  2.   width: 300px;
  3.   height: 150px;
  4.   outline: 4px dashed #007acc; /* Outline blu tratteggiato */
  5.   padding: 20px;
  6.   background-color: #f0f0f0;
  7.   font-size: 18px;
  8.   text-align: center;
  9.   border-radius: 8px;
  10.   color: #333;
  11. }

Contenuto Esempio: outline

Esempio di utilizzo di outline

In questo esempio, la proprietà outline viene usata per creare un contorno blu tratteggiato attorno a un elemento con bordo rosso.


Elemento con contorno (outline) visibile


CSS e HTML per l'elemento con contorno:

  
  <style>
    .outline-example {
      width: 300px;
      height: 150px;
      outline: 4px dashed #007acc; /* Outline blu tratteggiato */
      border: 4px solid red;  /* Bordo rosso */
      padding: 20px;
      background-color: #ffff;
      font-size: 18px;
      text-align: center;
      border-radius: 8px;
      color: #333;
    }
  </style>
  
  <div class="outline-example">
    Elemento con contorno (outline) visibile
  </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