AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

CSS border (frontiera, chenar, bordura)


Next Page >>
HTML images

CSS Tutorial » Bordes CSS (frontiera, chenar, bordura)

Definiția frontierelor CSS.

Proprietățile chenarului CSS vă permit să definiți zona chenarului unui element.

Marginile apar direct între marginea și umplerea unui element. Bordura poate fi un stil predefinit, cum ar fi, linie continuă, linie punctată, linie dublă etc. sau o imagine.

Acest element verde are ub chenar rosu subțire, solid
și o margine galben de 25px.

 

Stil de bordură CSS

La propiedad de estilo de borde puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted; border-color:#00F}
p.dashed {border-style: dashed; border-color:#00F}
p.solid {border-style: solid; border-color:#00F}
p.double {border-style: double; border-color:#00F}
p.groove {border-style: groove; border-color:#00F}
p.ridge {border-style: ridge; border-color:#00F}
p.inset {border-style: inset; border-color:#00F}
p.outset {border-style: outset; border-color:#00F}
p.none {border-style: none; border-color:#00F}
p.hidden {border-style: hidden; border-color:#00F}
p.mix {border-style: dotted dashed solid double; border-color:#00F}
</style>
</head>
<body>

<h2>Proprietatea în stilul chenarului</h2>
<p>Această proprietate specifică ce tip de chenar trebuie afișat:</p>

<p class="dotted">O bordura punctată O bordura mixtă.</p>
<p class="dashed">O bordura punctată.</p>
<p class="solid">O bordura solidă.</p>
<p class="double">O bordura dubla</p>
<p class="groove">O bordura groove.</p>
<p class="ridge">O bordura de creastă.</p>
<p class="inset">O bordura inserată.</p>
<p class="outset">O frontieră inițială.</p>
<p class="none">Fara chenar.</p>
<p class="hidden">O bordura ascunsă.</p>
<p class="mix">Un chenar mixt.</p>

</body>
</html>

Etichete: chenare CSS, raza chenarului, culoarea chenarului, dimensiunea chenarului, generatorul chenarului, marginea fundalului CSS, marginea rotunjită CSS, umbra bordurilor CSS, stenograma frontierei

 

Setarea lățimii chenarului CSS

Proprietatea lățimii chenarului specifică lățimea zonei chenarului. Aceasta este o proprietate de prescurtare pentru setarea în același timp a grosimii tuturor celor patru laturi ale chenarului unui element.

Exemplu
<!DOCTYPE html>
<html lang = "ro">
<head>
<meta charset = "utf-8">
<title> Proprietatea lățimii chenarului CSS </title>
<style>
p {
border-style: solid;
padding: 20px;
margin: 20px; border-color: #039
}
p.one {
border-width: 6px;
}
p.two {
border-width: 6px 12px;
}
p.three {
border-width: 6px 12px 16px;
}
p.four {
border-width: medium 12px thick 16px;
}
</style>
</head>
<body>
<p class = "one"> <strong> sintaxa unei valori: </strong>
valoarea unică setează lățimea tuturor celor patru laturi ale chenarului. </p>
<p class = "two"> <strong>sintaxă cu două valori: </strong>
prima valoare setează lățimea marginii de sus și de jos, în timp ce
a doua valoare setează lățimea marginii laturilor stânga și dreapta. </ p>
<p class = "three"> <strong> sintaxă cu trei valori:
</strong> prima valoare setează lățimea marginii superioare,
a doua valoare stabilește lățimea marginii stânga și dreapta și
a treia valoare setează lățimea marginii de jos. </p>
<p class = "four"> <strong>sintaxă cu patru valori:
</strong> fiecare valoare setează lățimea chenarului individual
în ordinea sus, dreapta, inferioară și stânga. </p>
</body>
</html>
Notă: lățimea chenarului poate fi specificată folosind orice valoare a lungimii, cum ar fi px, em, rem, etc.

 

Specificați culoarea chenarului CSS

Proprietatea border-color specifică culoarea zonei border. Aceasta este, de asemenea, o proprietate de prescurtare pentru setarea culorii celor patru laturi ale chenarului unui element.

Exemple
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Proprietatea de culoare a chenarului CSS</title>
<style>
p {
border-width: 15px;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}
</style>
</head>
<body>
<p class="one"><strong>one-value syntax:</strong>
valoarea unică setează culoarea celor patru laturi ale chenarului.</p>
<p class="two"><strong>two-value syntax:</strong>
prima valoare setează culoarea marginii de sus și de jos,
în timp ce a doua valoare stabilește culoarea marginii laturilor
dreapta și stânga.</p>
<p class="three"><strong>three-value syntax:</strong>
prima valoare setează culoarea chenarului superior, a doua valoare setează
culoarea chenarului drept și stâng, iar a treia valoare setează culoarea
de la bordura inferioară.</p>
<p class="four"><strong>four-value syntax:</strong>
fiecare valoare setează culoarea chenarului individual în cea mai înaltă ordine,
dreapta, jos și stânga.</p>
</body>
</html>
Notă: proprietatea CSS lățimea chenarului sau culoarea chenarului nu funcționează când este utilizată singură. Utilizați proprietatea în stilul chenarului pentru a seta mai întâi stilul chenarului.

 

CSS, border-radius

border-color

border size

Tags: Bordes CSS, border-radius, border-color, border size, border generator, css border-bottom, css rounded border, css border shadow, border shorthand

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.