Introducere în Web Development

Proprietatea border este o prescurtare pentru a seta dintr-un foc mai multe proprietăți legate de conturul unui element. Adică cele 4 linii din laturile unui element.

Proprietățile unui border

border-width

Cât de groasă este linia.

border-style

Cum arată conturul. Mai multe valori pot fi puse aici, dar cele mai întâlnite de mine sunt:

• none – nu afișează deloc conturul, indiferent de lățimea setată

• solid – Afișează o linie solidă

• dotted – Afișează o linie punctată

• dashed – Afișează o linie întreruptă

• double – Afișează o linie dublă. În acest caz, grosimea dată prin broder-width va fi grosimea totală a celor două linii

border-color

Culoarea liniei.

                    border: 1px dashed pink;

/* 
Aceleași proprietăți individual
*/
border-width: 1px;
border-style: dashed;
border-color: pink;
                

                    border: 1em;

/* 
Aceleași proprietăți individual
*/
border-width: 1em;
border-style: solid;
border-color: currentColor;
                

Border pe o singură parte

Dacă avem nevoie de border pe o singură parte, se pot folosi proprietăți cu direcție. Proprietățile clasice sunt:

• border-top

• border-bottom

• border-left

• border-right

Însă în web-development-ul modern se folosesc alte atribute:

Fiecare din acestea funcționează ca și proprietatea border, cu diferența evidentă că setează doar una sau două borduri. Chiar se pot și seta proprietăți individual, în formatul:

border-«direcție»-«proprietate»

                    border-bottom: 0.25rem dotted pink;

/* 
Aceleași proprietăți individual
*/
border-bottom-width: 0.25rem;
border-bottom-style: dashed;
border-bottom-color: pink;
                

                    border-block-end: 0.25rem dotted pink;

/* 
Aceleași proprietăți individual
*/
border-block-end-width: 0.25rem;
border-block-end-style: dashed;
border-block-end-color: pink;
                

                    border-left: 0.25rem dotted pink;
border-right: 0.25rem dotted pink;

/* 
Aceleași proprietăți individual
*/
border-left-width: 0.25rem;
border-left-style: dashed;
border-left-color: pink;
border-right-width: 0.25rem;
border-right-style: dashed;
border-right-color: pink;
                

                    border-inline: 0.25rem dotted pink;

/* 
Aceleași proprietăți individual
*/
border-inline-width: 0.25rem;
border-inline-style: dashed;
border-inline-color: pink;
                

Outline

Pe lângă border, în CSS se poate defini o altă proprietate numită outline. Aceasta va apărea mereu în afara elementului, mereu pe toate direcțiile, și nu va modifica în niciun fel mărimea elementului.

Proprietățile sunt exact aceleași ca la border, și există proprietăți specifice:

• outline-style

• outline-width

• outline-color