Bordură CSS - Proprietate Prescurtată
Există multe proprietăți de bordură de urmărit. Pentru a scurta codul, le poți seta pe toate într-o singură proprietate border.
Prescurtarea border setează aceste proprietăți, în această ordine: border-width, border-style (obligatoriu) și border-color.
Poți seta și toate valorile pentru o singură latură folosind border-left, border-right, border-top, sau border-bottom.
Toate bordurile
O singură declarație setează lățimea, stilul și culoarea tuturor celor patru borduri.
Prompt
O pagină HTML care setează lățimea, stilul și culoarea într-o singură declarație de bordură.
Într-un bloc intern
<style>, dă unui paragraf border: 5px solid red. Adaugă un paragraf pentru a o arăta.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Bordura din stânga
Prescurtarea border-left setează lățimea, stilul și culoarea doar pentru bordura din stânga.
Prompt
O pagină HTML care folosește prescurtarea border-left doar pentru o latură.
Într-un bloc intern
<style>, dă unui paragraf border-left: 6px solid red. Adaugă un paragraf pentru a arăta doar bordura din stânga.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-left: 6px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Bordura de jos
Prescurtarea border-bottom setează doar bordura de jos.
Prompt
O pagină HTML care folosește prescurtarea border-bottom doar pentru o latură.
Într-un bloc intern
<style>, dă unui paragraf border-bottom: 6px solid red. Adaugă un paragraf pentru a arăta doar bordura de jos.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-bottom: 6px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>