CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS border-bottom-left-radius

La proprietà CSS border-bottom-left-radius definisce il raggio dell'angolo inferiore sinistro

La proprietà border-bottom-left-radius consente di arrotondare l'angolo inferiore sinistro di un elemento, controllando la curvatura tramite una misura in pixel o una percentuale. Può essere utilizzata da sola o insieme ad altre proprietà di arrotondamento degli angoli per ottenere effetti visivi interessanti.

Sintassi

border-bottom-left-radius: length | percentage;

Significato dei valori principali:

  • length: definisce la curvatura come una distanza fissa (ad esempio, 10px, 5em, ecc.).

  • percentage: definisce la curvatura come una percentuale delle dimensioni dell'elemento (ad esempio, 50%, che crea un angolo perfettamente arrotondato).


Esempio proprietà: border-bottom-left-radius


Codice Esempio: border-bottom-left-radius

CODE: CSSpreleva codice
  1.     .border-bottom-left-radius-example {
  2.       border-bottom-left-radius: 20px;
  3.       padding: 20px;
  4.       background-color: #50a14f;
  5.       color: white;
  6.       font-size: 22px;
  7.       text-align: center;
  8.       width: 300px;
  9.       height: 150px;
  10.     }

Contenuto Esempio: border-bottom-left-radius

Esempio di utilizzo di border-bottom-left-radius

In questo esempio, la proprietà border-bottom-left-radius viene utilizzata per arrotondare l'angolo inferiore sinistro di un elemento:


Angolo inferiore sinistro arrotondato

CSS per l'elemento con angolo arrotondato:

  
  <style>
    .border-bottom-left-radius-example {
      width: 300px;
      height: 150px;
      padding: 20px;
      background-color: #50a14f;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 0; /* Resetta gli altri angoli per evidenziare solo quello specifico */
      border-bottom-left-radius: 20px; /* Arrotonda solo l'angolo inferiore sinistro */
    }
  </style>
  <div class="border-bottom-left-radius-example">
    Angolo inferiore sinistro arrotondato
  </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