Borduri Rotunjite CSS
Proprietatea border-radius adaugă colțuri rotunjite unui element. O valoare mai mare face colțurile mai rotunde.
Exemplu
Un border-radius de 5px rotunjește colțurile paragrafului cu bordură.
Prompt
O pagină HTML care dă unui element colțuri rotunjite.
Într-un bloc intern
<style>, dă unui paragraf o bordură solidă de 2px roșie și un border-radius de 5px. Adaugă un paragraf pentru a arăta colțurile rotunjite.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border: 2px solid red;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Round border</p>
</body>
</html>
Toate Proprietățile de Bordură CSS
Un rezumat al proprietăților de bordură:
border— toate proprietățile de bordură într-o singură declarație.border-bottom,border-left,border-right,border-top— toate proprietățile pentru o singură latură într-o singură declarație.border-color,border-style,border-width— culoarea, stilul și lățimea tuturor celor patru borduri.border-bottom-color,border-bottom-style,border-bottom-width— culoarea, stilul și lățimea bordurii de jos (și același model pentrutop,leftșiright).border-radius— setează cele patru raze de colț pentru colțuri rotunjite.