CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS border-right-style

La proprietà CSS border-right-style imposta lo stile del bordo destro (CSS3)

La proprietà border-right-style consente di definire lo stile del bordo destro di un elemento. Puoi scegliere tra vari stili come **solid** (linea continua), **dashed** (linea tratteggiata), **dotted** (linea punteggiata), e altri.

Sintassi

border-right-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset;

Significato dei valori principali:

  • none: non viene applicato alcun bordo.

  • solid: un bordo continuo e solido.

  • dashed: un bordo tratteggiato.

  • dotted: un bordo a punti.

  • double: un bordo doppio con due linee distinte.

  • groove: un bordo che sembra incavato, con un effetto tridimensionale.

  • ridge: un bordo che sembra sporgere, con un effetto tridimensionale.

  • inset: un bordo che sembra incassato.

  • outset: un bordo che sembra sporgere.


Esempio proprietà: border-right-style


Codice Esempio: border-right-style

CODE: CSSpreleva codice
  1. .border-right-style-example {
  2.   width: 300px;
  3.   height: 200px;
  4.   border-right-width: 5px; /* Imposta la larghezza del bordo destro */
  5.   border-right-style: dashed; /* Bordo destro tratteggiato */
  6.   border-right-color: #50a14f; /* Colore verde per il bordo destro */
  7.   padding: 20px;
  8.   background-color: #ff6347;
  9.   color: white;
  10.   font-size: 22px;
  11.   text-align: center;
  12.   border-radius: 10px;
  13. }
  14.  

Contenuto Esempio: border-right-style

Esempio di utilizzo di border-right-style

In questo esempio, la proprietà border-right-style viene utilizzata per definire lo stile del bordo destro di un elemento:


Elemento con bordo destro tratteggiato

CSS e HTML per l'elemento con bordo destro trattato:

  
  <style>
    .border-right-style-example {
      width: 300px;
      height: 200px;
      border-right-width: 5px; /* Imposta la larghezza del bordo destro */
      border-right-style: dashed; /* Bordo destro tratteggiato */
      border-right-color: #000; /* Colore nero per il bordo destro */
      padding: 20px;
      background-color: #ff6347;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 0px;
    }
  </style>
  
  <div class="border-right-style-example">
      Elemento con bordo destro tratteggiato
  </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