CSS
HTML
JavaScript
PHP
Coming Soon
Generatori
Varie & Old

CSS border-inline-start-style

La proprietà CSS3 border-inline-start-style imposta lo stile del bordo sul lato iniziale logico

La proprietà border-inline-start-style consente di definire lo stile del bordo sul lato iniziale in linea di un elemento. È utile nei layout che devono adattarsi alla direzione del testo (es. LTR o RTL), fornendo flessibilità nella definizione grafica del bordo.

Sintassi

border-inline-start-style: stile;

Significato dei valori principali:

  • none: nessun bordo.

  • solid: linea continua.

  • dashed: linea tratteggiata.

  • dotted: linea a puntini.

  • double: linea doppia.

  • groove / ridge / inset / outset: effetti 3D basati sul colore.


Esempio proprietà: border-inline-start-style


Codice Esempio: border-inline-start-style

CODE: CSSpreleva codice
  1. .border-inline-start-style-example {
  2.   width: 80%;
  3.   padding: 20px;
  4.   border-inline-start-width: 5px;
  5.   border-inline-start-style: dotted;
  6.   border-inline-start-color: #9b59b6;
  7.   background-color: #f9f0fb;
  8.   font-size: 20px;
  9.   text-align: center;
  10.   direction: ltr;
  11.   border-radius: 8px;
  12. }

Contenuto Esempio: border-inline-start-style

Esempio di utilizzo di border-inline-start-style

In questo esempio, il bordo iniziale in linea ha uno stile a puntini (dotted):


Bordo a puntini sul lato iniziale (inline-start)

CSS e HTML per l'elemento con border-inline-start-style:

  
  <style>
    .border-inline-start-style-example {
      width: 80%;
      padding: 20px;
      border-inline-start-width: 5px;
      border-inline-start-style: dotted;
      border-inline-start-color: #9b59b6;
      background-color: #f9f0fb;
      font-size: 20px;
      text-align: center;
      direction: ltr;
      border-radius: 8px;
    }
  </style>

  <div class="border-inline-start-style-example">
      Bordo a puntini sul lato iniziale (inline-start)
  </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