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

Colțuri rotunjite CSS border-radius


Next Page >>
HTML images

CSS Tutorial » Colțuri rotunjite CSS border-radius

Proprietatea CSS border-radius rotunjește colțurile marginii exterioare a unui element.
Puteți seta o singură rază pentru a face colțuri circulare sau două raze pentru a face colțuri eliptice.

Sintaxa:

border-radius: [ <length> | <%> ] [ <length> | <%> ]?

 

Acest element verde are o lățime de 300 px, o înălțime de 150 px, un chenar rosu cu raza: 20 px, solid, o margine galbenă de 10 px și centrat în centru.

 

Proprietate de colț rotunjit: border-radius

Proprietatea CSS border-radius definește raza colțurilor unui element.

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
#colt1 {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
background-color: #C6EB94;
}

#colt2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#colt3 {
border-radius: 25px;
background: url(https://www.agernic.com/uploads/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<h1>La propiedad border-radius</h1>

<p>Colțuri rotunjite pentru un element cu o anumită culoare de fundal:</p>
<p id="colt1">Colturi rotunjite!</p>
<p>Colțuri rotunjite pentru un element cu margine:</p>
<p id="colt2">Colturi rotunjite!</p>
<p>Colțuri rotunjite pentru un element cu o imagine de fundal:</p>
<p id="colt3">Colturi rotunjite!</p>

</body>
</html>

Etiquetas: colț rotunjit, colțuri rotunjite, css3 colțuri rotunjite div, colț rotund css

 

CSS border-radius: specificare fiecare colț

Proprietatea de rază a chenarului este specificată ca:
1. una, două, trei sau patru valori <lungime> sau <procentaj>.
Folosit pentru a seta o singură rază pentru colțuri
2. opțional urmat de „/” și una, două, trei sau patru valori <length> or <percentage>.
Aceasta este utilizată pentru a seta o rază suplimentară, astfel încât să puteți avea colțuri eliptice.

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
/* The syntax of the first radius allows one to four values */
#colt1{
/* Radius is set for all 4 sides */
border-radius: 15px;
height: 150px;
width: 300px;
background-color: #FF9;
padding: 10px;
}
#colt2{
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
background-color: #CFF;
height: 150px;
width: 300px;
padding: 10px;
}
#colt3{
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 20px 40px 20px;
background-color: #71FF95;
height: 150px;
width: 300px;
padding: 10px;
}
#colt4{
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 0 30px 40px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #CCC;
}
#colt5{
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #C9F;
}
#colt6{
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 15% / 20px 30px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #0FF;
}
#colt7{
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FFCACA;
}
#colt8{
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 15% / 20px 25em 30px 35em;
height: 150px;
width: 300px;
padding: 10px;
background-color: #6F9;
}
#colt9{
/* Global values */
border-radius: inherit;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FDB;
}
#colt10{
border-radius: initial;
height: 150px;
width: 300px;
padding: 10px;
background-color: #CACAFF;
}
#colt11{
border-radius: unset;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FF8AFF;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a specified background color:</p>
<p id="colt1">Rounded corners! colt1<br />
<strong>Radius is set for all 4 sides</strong><br />
border-radius: 15px;<br />
height: 150px;<br />
width: 300px;<br />
background-color: #FF9;<br />
padding: 10px;</p>
<p id="colt2">Rounded corners! colt2<br />
<strong>top-left-and-bottom-right | top-right-and-bottom-left</strong><br />
border-radius: 10px 5%;<br />
background-color: #CFF;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;</p>
<p id="colt3">Rounded corners! colt3<br />
<strong>top-left | top-right-and-bottom-left | bottom-right</strong><br />
border-radius: 20px 40px 20px;<br />
background-color: #71FF95;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;</p>
<p id="colt4">Rounded corners! colt4<br />
<strong>top-left | top-right | bottom-right | bottom-left</strong><br />
border-radius: 10px 0 30px 40px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #CCC;</p>
<p id="colt5">Rounded corners! colt5<br />
border-radius: 10px / 20px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #C9F;</p>
<p id="colt6">Rounded corners! colt6<br />
<strong>(first radius values) / top-left-and-bottom-right | top-right-and-bottom-left</strong><br />
border-radius: 10px 15% / 20px 30px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #0FF;</p>
<p id="colt7">Rounded corners! colt7<br />
<strong>(first radius values) / top-left | top-right-and-bottom-left | bottom-right </strong><br />
border-radius: 10px 5px 2em / 20px 25px 30%;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FFCACA;</p>
<p id="colt8">Rounded corners! colt8<br />
<strong>(first radius values) / top-left | top-right | bottom-right | bottom-left </strong><br />
border-radius: 10px 15% / 20px 25em 30px 35em;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #6F9;</p>
<p id="colt9">Rounded corners! colt9<br />
<strong>Global values</strong><br />
border-radius: inherit;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FDB;<br />
}</p>
<p id="colt10">Rounded corners! colt10<br />
border-radius: initial;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #CACAFF;</p>
<p id="colt11">Rounded corners! colt11 <br />
border-radius: unset;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FF8AFF;</p>

</body>
</html>

Nota:  Proprietatea border-radius este de fapt o proprietate de stenogramă a proprietății border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.

 

Prefixul -moz-

Browserul Firefox Mozilla a acceptat proprietatea border-radius, prefixată cu -moz-, de la versiunea 1.0. Cu toate acestea, abia de la versiunea 3.5 browserul a permis colțurile eliptice, adică acceptarea a două valori pe colț pentru a determina independent razele orizontale și verticale.

Singura diferență majoră constă în numele chenarului individual - * - proprietăți radio, cu proprietățile prefixate cu -moz- urmând o convenție de denumire ușor diferită, după cum urmează:

W3C Specificație Implementarea Mozilla
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft


Exemple

<!DOCTYPE html>
<html>
<head>
<style>
#Example_A {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color: #CCC;
padding: 10px;
}
#Example_B {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color: #FF9;
padding: 10px;
}

#Example_C {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color: #CCF;
padding: 10px;
}

#Example_D {
height: 15em;
width: 30em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color: #0FF;
padding: 10px;
}
</style>
</head>
<body>

<h1>La propiedad border-radius</h1>

<p>Esquinas redondeadas para un elemento con un color de fondo específico:</p>
<p id="Example_A"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color: #CCC;
padding: 10px;</p>
<p id="Example_B"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color: #FF9;
padding: 10px;</p>
<p id="Example_C"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color: #CCF;
padding: 10px;</p>
<p id="Example_D"> height: 15em;
width: 30em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color: #0FF;
padding: 10px;</p>

</body>
</html>

 

colțuri rotunjite css buton

border-radius pentru imagine sau fotos

border-radius pentru tabele

Tags: box-shadow, shadow, border, padding, border-radius, css circle, margin css, border-radius circle

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.