Home esercizi css bordi

Esercizi Border CSS

Metti alla prova la tua abilità nel creare bordi personalizzati e stilizzati per i tuoi elementi HTML. Pratica l’uso delle regole CSS border, border-radius per ottenere un design professionale e moderno.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare un bordo blu di 2px solo nella parte superiore del paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        border-top: 2px solid blue;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha un bordo superiore blu di 2px.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un bordo rosso di 1px con raggio di 5px solo intorno al link.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        border: 1px solid red;
        border-radius: 5px;
        padding: 5px 10px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare un bordo nero di 3px con raggio di 10px solo nella parte inferiore del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        border-bottom: 3px solid black;
        border-radius: 0 0 10px 10px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un bordo inferiore nero di 3px con raggio di 10px.</div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare un bordo verde di 2px solo a destra degli elementi di lista.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        border-right: 2px solid green;
        padding: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare un bordo tratteggiato nero di 1px solo nella parte inferiore del titolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      h1 {
        border-bottom: 1px dashed black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con un bordo inferiore tratteggiato nero di 1px.</h1>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con una sezione divisa in due colonne (usando due div). Usa il CSS per impostare un bordo grigio di 2px con raggio di 8px solo intorno alla colonna sinistra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      .colonna {
        height: 200px;
        width: 50%;
        float: left;
        box-sizing: border-box;
        border: 2px solid grey;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <div class="colonna"></div>
    <div class="colonna"></div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un bordo rosso di 1px solo nella parte superiore del link.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      a {
        border-top: 1px solid red;
        padding: 5px 10px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Passa il mouse qui</a>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare un bordo verde di 3px solo a sinistra del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      div {
        border-left: 3px solid green;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un bordo verde di 3px solo a sinistra.</div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con una tabella all'interno. Usa il CSS per impostare un bordo tratteggiato blu di 1px solo a destra di tutte le celle della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      table {
        width: 100%;
      }

      th,
      td {
        border-right: 1px dashed blue;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Intestazione 1</th>
        <th>Intestazione 2</th>
      </tr>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
    </table>
  </body>
</html>