HTML e Css per applicare una cornice con titolo nella cornice

 

Durante la creazione delle pagine web, può tornare utile impostare una cornice con all'interno del testo.

Nella cornice, possiamo mettere un titolo che si trova nella parte sinistra all'interno del bordo, il tutto come mostrato nella figura precedente.

Nel file di foglio di stile (.css) scriviamo una formattazione come riportato qui di seguito.

.css

.contenitore {

            border: 2px solid black;

            padding: 20px;

            width: 300px;

            position: relative;

        }

.titolo {

            font-size: 20px;

            font-weight: bold;

            position: absolute;

            top: -15px;

            left: 10px;

            background-color: white;

            padding: 0 5px;

        }

Mentre nella parte html, applichiamo lo stile, come riportato qui di seguito.

HTML

<div class="contenitore">

        <div class="titolo">Titolo con cornice</div>

        <p>Testo all'interno del contenitore.</p>

    </div>