Colțuri Rotunjite CSS
Colțurile rotunjite ale unui element vin dintr-o singură proprietate CSS: border-radius.
Proprietatea CSS border-radius
Ceea ce controlează border-radius este cât de mare este raza fiecărui colț al elementului.
Funcționează pe orice element care are o background-color, un border sau o background-image.
Sfat: În spatele acestei proprietăți prescurtate stau proprietățile individuale border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.
Exemplu
Fiecare dintre aceste trei casete are colțuri rotunjite: prima are o culoare de fundal, a doua un chenar, a treia o imagine de fundal.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius Basics</title>
<style>
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS border-radius Property</h2>
<p>Rounded corners for an element with a background color:</p>
<div id="div1">
<p>Rounded corners!</p>
</div>
<p>Rounded corners for an element with a border:</p>
<div id="div2">
<p>Rounded corners!</p>
</div>
<p>Rounded corners for an element with a background image:</p>
<div id="div3">
<p>Rounded corners!</p>
</div>
</body>
</html>
CSS border-radius - Specificarea Fiecărui Colț
border-radius poate primi de la una la patru valori, iar numărul lor decide la ce colțuri ajunge fiecare valoare.
border-radius: 15px 50px 30px 5px; - cu patru valori, colțurile sunt atribuite pe rând: stânga sus, dreapta sus, dreapta jos și, în final, stânga jos.
border-radius: 15px 50px 30px; - cu trei valori, stânga sus o ia pe prima, dreapta sus și stânga jos o împart pe a doua, iar dreapta jos o ia pe a treia.
border-radius: 15px 50px; - cu două valori, stânga sus și dreapta jos o împart pe prima, iar dreapta sus și stânga jos o împart pe a doua.
border-radius: 15px; - cu o singură valoare, toate cele patru colțuri primesc aceeași rotunjire.
Exemplu
Câte o casetă pentru fiecare variantă a prescurtării border-radius: una, două, trei și patru valori.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius - Specify Each Corner</title>
<style>
#div1 {
border-radius: 15px 50px 30px 5px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px;
background: #04AA6D;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS border-radius - Specify Each Corner</h2>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<div id="div1"></div>
<p>Three values - border-radius: 15px 50px 30px:</p>
<div id="div2"></div>
<p>Two values - border-radius: 15px 50px:</p>
<div id="div3"></div>
<p>One value - border-radius: 15px:</p>
<div id="div4"></div>
</body>
</html>
Forme Eliptice și Circulare CSS
Un colț devine eliptic atunci când raza lui are două valori separate printr-o linie oblică /: mai întâi raza orizontală, apoi raza verticală.
Dacă setezi border-radius la 50%, rezultatul depinde de forma elementului: un element dreptunghiular devine oval, iar unul pătrat devine cerc.
Exemplu
Aici border-radius produce forme eliptice, ovale și circulare.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Elliptical and Circular Shapes</title>
<style>
#div1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px / 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>CSS Elliptical and Circular Shapes</h2>
<p>Elliptical corner - border-radius: 70px / 30px:</p>
<div id="div1"></div>
<p>Elliptical corner - border-radius: 15px / 50px:</p>
<div id="div2"></div>
<p>Oval shape - border-radius: 50% (rectangular element):</p>
<div id="div3"></div>
<p>Circle shape - border-radius: 50% (square element):</p>
<div id="div4"></div>
</body>
</html>