Circolo CSS con bordo

Le forme vengono spesso utilizzate nella web design. Più specificamente, la forma del cerchio viene utilizzata per attirare l'attenzione dell'utente e per far risaltare qualcosa, come le immagini del profilo sono per lo più incorporate in una cornice del cerchio. CSS offre diverse proprietà di styling per gli elementi per renderli migliori per l'applicazione come il "raggio di confine"La proprietà viene utilizzata per rendere i bordi dell'elemento e il"confine"La proprietà imposta il bordo dell'elemento.

Questo articolo ti istruirà:

• Come creare un cerchio con bordo in CSS?
• Come aggiungere il colore nel cerchio alimitato usando CSS?
• Come regolare lo stile del bordo di un cerchio con CSS?

Come creare un cerchio con bordo in CSS?

Per creare un cerchio con un bordo in CSS, in primo luogo, la proprietà del bordo viene utilizzata per applicare il bordo attorno all'elemento. IL "raggio di confine"La proprietà viene utilizzata per creare la forma circolare del bordo.

A tale scopo, passare attraverso l'esempio fornito.

Crea un file HTML

Innanzitutto, aggiungi un ""Elemento e assegnarlo una classe"Circle-Div":

Classe "Circle-Div" di stile

Accedi al ""Container con l'aiuto della classe specificata".Circle-Div"E applica le seguenti proprietà:

.Circle-div
larghezza: 200px;
Altezza: 200px;
raggio di frontiera: 50%;
Bordo: 5px Solid RGB (119, 0, 255);

Qui:

• "larghezza"Specifica la larghezza del cerchio.
• "altezza"Determina l'altezza del cerchio.
• "raggio di confine"Con il valore"50%"Significa il bordo del cerchio.
• "confine"Viene utilizzato per applicare un bordo con la larghezza, lo stile e il colore del bordo specificato.

Produzione

Come aggiungere il colore nel cerchio alimitato usando CSS?

Il CSS "colore di sfondo"La proprietà viene utilizzata per aggiungere colore al cerchio come segue:

Background-color: LightsEagreen;

Produzione

Come regolare lo stile del bordo di un cerchio con CSS?

Specificando lo stile del bordo, possiamo modellare il bordo del cerchio. Alcuni stili di frontiera usati di frequente sono elencati di seguito:

• Punteggiato
• Solido
• Scanalatura
• Inserto
• Inizio
• Doppio

Bordo punteggiato

Imposta lo stile di confine su “punteggiato"Per specificare il bordo tratteggiato:

Bordo: 5px punteggiato di RGB (252, 87, 170);

Produzione

Bordo del groove

Applicare lo stile di confine "scanalatura"Nella proprietà del confine:

Bordo: 10px Groove RGB (187, 181, 226);

Produzione

Abbiamo dimostrato con successo come creare e modellare il cerchio delimitato in CSS.

Conclusione

Per creare un cerchio con i bordi, vengono utilizzate due importanti proprietà CSS. Per creare un bordo, in primo luogo, aggiungi un contenitore "div" e accedi a CSS usando la sua classe rispettiva. Quindi, applica il CSS "raggio di confine"Proprietà e regolarla su"50%"Per creare un cerchio e il CSS"confine"La proprietà viene utilizzata per impostare un bordo attorno al cerchio. Questo blog ha spiegato il metodo per la creazione di un cerchio con i bordi in CSS.