CSS3 – border

CSS (Cascading Style Sheets) este un standard pentru formatarea 

elementelor unui document HTML.
CSS3 - reprezintă un upgrade ce aduce câteva atribute noi și ajută la
dezvoltarea noilor concepte in webdesign.
Proprietăți ale bordere-lor în CSS
•border-width
•border-style (required)
•border-color

Exemplu:
p {
    border: 5px solid red;
}

• Putem aplica border doar pentru una dintre zonele: top, right, bottom, left

Exemplu:
p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}
 CSS3 oferă posibilitatea de a crea borduri cu colțurile rotunjite fară a folosi
elemente grafice de fundal așa cum se folosea anterior acestui upgrade.

• Proprietatea CSS3 border-radius definește prin valorile exprimate in pixeli cat de rotunjite vor fi
colțurile unui element HTML sau unei imagini.

Exemplu:
border-radius: 5px ;// definește valoarea de 5px radius pentru toate cele 4 colțuri ale elementului.

• Fiecare colț poate avea o alta valoare exprimată in pixeli diferită de un alt colț al aceluiași element.
Prin urmare putem folosi pana la 4 valori diferite atribuite unui element HTML.

Exemplu:
border-radius: 5px 7px 12px 4px;// aceste valori multiple definesc cat de mult vor fi rotunjite
colțurile elementului HTML, iar pentru fiecare colt este specificata valorarea.

- Ordinea în care sunt precizate valorile este urmatoarea:

stg-sus dr-sus dr-jos stg-jos
Colțul stanga-sus are valoarea border-radius de 5px, colțul dreapta-sus are valoarea border-radius de 7px, colțul
dreapta-jos al elementului HTML are valoarea de 12px iar colțul din stanga-jos are valoarea de 4px.
Exemplu:
div {
border: 2px solid #333333;

padding: 10px 40px;

background: #dddddd;

width: 300px;

border-radius:25px;
}
 Proprietatea border-image
• Pentru a folosi aceste atribute mai întâi vom folosi elementul border-style
pentru a avea un border

• Putem particulariza următoarele elemente

border-image-source: URL(border.png);
border-image-slice: numar | procent | fill | initial | inherit; 
border-image-width: 25px; 
border-image-outset : 5px;
border-image-repeat : stretch | repeat | round | space ;
Exemplu:
#myDIV {

border: 15px solid transparent;

padding: 15px;

border-image: url(border.png);

border-image-slice:50;

border-image-repeat: round;

} 
Exerciții:
• Folosiți una dintre imaginile disponibile în folderul cu resurse 
(border1.png, border2.png, border3.png) pentru a incadra o imagine.
• Scrieți textul unei poezii încadrat de border1(carte) pe 2 coloane.
• Realizați o pagină web folosind 2 background-uri. Al doilea 
background va fi o sigla plasata în colțul dreapta-jos, iar primul va 
acoperi integral documentul (incluziv zona rezervată pentru margini 
care va avea 50px, mai puțin sus unde va fi de 100px).
• Realizați un design original folosind elementele studiate (background, 
border, margin, padding)