Una de les novetats que ens aportarà el CSS3 (el dia que el puguem usar amb normalitat, ja que ara per ara només ho suporten navegadors com Firefox 3.0 o superior, Safari 3.1 o superior i Google Chrome), és la propetat “border-radius“. Amb aquesta propietat de CSS3 podrem fer les típiques cantonades rodones sense fer filigranes o combinar imatges de fons. Avui he fet una prova seguint un article escrit a bloggingcss.com, i aquí ve l’explicació…

Propietat border-radius en CSS3
Avui per avui, els estils de CSS3 no són estàndards, i per tant tindrem diferències a l’hora de fer servir la propietat border-radius per a Firefox o Safari/Chrome, tals que:

  • -moz-border-radius per a Firefox
  • -webkit-border-radius per a Safari/Chrome

Com moltes altres, la propietat border-radius en CSS3 es pot declarar amb un sol valor (declaració curta) o bé amb un valors per a cadascuna de les cantonades (declaració llarga). Si utilitzem aquest segon cas, l’ordre de les propietats equival al següent:

  • Primer valor: cantonada superior esquerra
  • Segon valor: cantonada superior dreta
  • Tercer valor: cantonada inferior dreta
  • Quart valor: cantonada inferior esquerra

Posant un exemple:

  • Exemple de declaració curta (40px per a totes les cantonades): #box {-moz-border-radius:40px;}
  • Exemple de declaració llarga (10px per a la la cantonada superior esquerra, 20px per a la cantonada superior dreta, 30px per a la cantonada inferior dreta i 40px per a la cantonada inferior esquerra): #box {-moz-border-radius:10px 20px 30px 40px;}


També podem declarar cadascuna de les cantonades per separat, fent servir les següents propietats:

  • -moz-border-radius-topleft: per a la cantonada superior esquerra
  • -moz-border-radius-topright: per a la cantonada superior dreta
  • -moz-border-radius-bottomright: per a la cantonada inferior dreta
  • -moz-border-radius-bottomleft: per a la cantonada inferior esquerra

Però les possibilitats de la propietat border-radius no s’acaben aquí… ja que fins ara hem suposat que per a cada cantonada volíem fer una corba “perfecta”, i pot donar-se el cas en que vulguem alguna cosa diferent. Per a aconseguir això, tenim el valor horitzontal del radi (horizontal radius) i el valor vertical del radi (vertical radius). Per a declarar aquests dos valors, ho farem de la següent manera (sent el primer valor equivalent al horitzontal i el segon al vertical):

#box {-moz-border-radius-topleft: 30px 15px;}

Aquesta definició dels valors horitzontal i vertical també la podem fer servir per a totes les cantonades:

#box {-moz-border-radius: 30px / 15px;}

Podríem dir que el navegador que actualment millor suporta aquesta propietat CSS3 és Firefox, així que farem la demostració amb el navegador de Mozilla, fent un exemple pràctic i senzill:

Exemple pràctic de l’aplicació de la propietat border-radius en CSS3
1. Primer de tot, escriurem el nostre codi HTML, fent un div amb la id “box”:

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Testing CSS3</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="box"></div>
</body>
</html>

2. Un cop fet això, assignarem les següents línies de CSS:

#box {
   -moz-border-radius: 20px 5px 20px 5px;
   background:#6B86A6;
   height:100px;
   width:590px;
}

3. El resultat que obtindrem si fem serfir Firefox, serà aquest:

Propietat border-radius a Safari i Google Chrome
Com comentava al principi del post, per a Safari i Chrome la definició de border-radius és una mica diferent, tal que:

  • -webkit-border-top-left-radius per a la cantonada superior esquerra
  • -webkit-border-top-right-radius per a la cantonada superior dreta
  • -webkit-border-bottom-right-radius per a la cantonada inferior dreta
  • -webkit-border-bottom-left-radius per a la cantonada inferior esquerra

Una altra de les diferències és que la definició curta dels valors no funcionarà en Safari o Chrome, i que per tant haurem de definir-los de la següent manera (un per un):

#box {
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 20px;
   -webkit-border-bottom-right-radius: 30px;
   -webkit-border-bottom-left-radius: 40px;}

Quant als valors horitzontal i vertical, no hi ha cap problema de suport per part de Safari i Chrome, i la definició quedaria així:

#box {-webkit-border-top-left-radius: 30px 15px;}

La única diferència que existeix en la definició curta, que no necessita una barra de separació:

#box {-webkit-border-radius: 30px 15px;}

Com veieu, aquesta propietat podrà ser molt útil a l’hora de maquetar. Només caldrà esperar per a que es defineixin els estàndards de CSS3 i tots els navegadors (inclòs l’estimat Internet Explorer …) el suportin amb normalitat i seguretat.

Via | www.bloggingcss.com [ang]

Entrades relacionades:

  1. Propietat box-shadow de CSS3
  2. Cantonades rodones amb CSS3: border-radius
  3. Transparències amb CSS3