CSS

en català

Secció 3: Propietats

4. Propietats relacionades amb les caixes

4.6. Propietats border

Les propietats border especifiquen no només la mida, sinó també el color i l'estil de l'àrea border d'una caixa. El fet de poder controlar més factors que en el cas dels marges o els padding, fa que siguin lleugerament més complicades. Però de seguida veuràs que el seu funcionament continua essent molt similar a les anteriors.

Hi ha tres grups de propietats border; un per a l'estil, un per al color i un per a la mida. Cadascun d'aquests grups consta de quatre propietats (una per a cada costat de la caixa) més una shortcut property, que actúa igual que en el cas de margin o padding. Això fan 3 * (4 + 1) = 15 propietats. I encara hi ha cinc shortcut properties més, que veurem al final d'aquest apartat. Un total de 20 (!) propietats, però que com veuràs funcionen totes de manera molt similar. Preparat?

Estil

Les propietats border style especifiquen l'estil o tipus de línia de la vora d'una caixa. Com ja hem dit, n'hi ha una per a cada costat: border-top-style, border-right-style, border-bottom-style i border-left-style. Fixa't que la paraula top, right, bottom i left es situa al mig del nom de la propietat.

Totes elles poden prendre com a valor una de les següents paraules clau:

• none (valor per defecte). No hi ha vores. Aquest valor fa que la mida de les vores sigui 0.
• hidden. Té el mateix resultat que none. En realitat hi ha una diferència quan s'usa amb taules, però aquest és un tema que se surt dels objectius d'aquest curs. Per més informació, com de costum, us remeto a l'especificació CSS2 (www.w3.org).
• dotted. La vora és una sèrie de punts.
• dashed. La vora és una sèrie de línies curtes.
• solid. La vora és una línia continua.
• double. La vora són dues línies 'solid'. El valor de border-width, que veurem a continuació, es reparteix entre les dues línies i l'espai que queda entre mig.
• groove. La vora sembla estar 'incrustada' en el fons.
• ridge. Al contrari que 'groove', la vora sembla que sobresurti del fons.
• inset. La vora fa que sembli que la caixa estigui incrustada en el fons. Fixa't que no és el mateix que groove: en aquell cas era la vora qui estava incrustada.
• outset. Al contrari que 'inset', la vora fa que sembli que la caixa sobresurti del fons.

Quan un navegador no suporta algun dels estils probablement el representarà com si fos solid.

---

La shortcut property border-style permet establir els valors per als quatre costats a la vegada. Igual que margin i padding, pot rebre un, dos, tres o quatre valors (vegeu l'explicació de margin).

Alguns exemples:

H2 {
border-top-style: dotted;
border-bottom-style: dashed;
border-left-style: solid;
border-right-style: double; }

/* i utilitzant la shortcut property: */
P {
border-style: solid solid double solid; }

P.ridge { border-style: groove; }

I el resultat d'aplicar els estils anteriors:

No tens ganes de veure com queden els estils 'ridge', 'inset' i 'outset'? Doncs per què no els proves ara mateix? La curiositat és la millor manera d'aprendre CSS!

Color

Les propietats border color especifiquen el color de l'àrea border, i són border-top-color, border-right-color, border-bottom-color i border-left-color. Els possibles valors són:

• Un color.
• transparent. Tot i ser transparent, la vora pot existir i tenir un gruix. Si el que volem és que no hi hagi vora, el que hem de fer és especificar que el seu estil sigui 'none', o bé que que la seva mida sigui 0, com veurem de seguida. Tingues present que IExplorer no interpreta correctament aquest valor, i en el seu lloc utilitza el valor per defecte.

El valor per defecte és el que tingui la propietat color d'aquest element, és a dir, el color de la font.

És necessari assignar algun valor a border-style si volem que border-color tingui algun efecte. Pensa que si no ho fem s'aplicarà el valor per defecte de border-style, és a dir, 'none', i llavors tant és quin color li assignem.

---

La shortcut property per al color de la vora és border-color, i permet assignar el color dels quatre costats en una sola declaració.

P {
border-style: solid;
border-color: blue #accab1 #f37 rgb(80%, 40%, 60%); }

P.obert {
border-top-color: transparent; } 

Mida

Les propietats border width són border-top-width, border-right-width, border-bottom-width i border-left-width, i especifiquen la mida de l'àrea border. Els valors possibles són:

• Una longitud. No poden ser negatives (no tindria sentit!). Una longitud de 0 equival a l'estil 'none'.
• Paraules clau: thin (prim), medium (mitjà), thick (gruixut). Aquests valors no corresponen a una mida concreta; cada navegador s'encarrega de triar unes quantitats raonables.

El valor per defecte és medium. Recorda que és necessari aplicar algun estil al border, ja que per defecte border-style pren el valor none. Si no li assignem cap estil, tant és el color i la mida de la vora, perquè de fet no es visualitzarà. En canvi, si assignem un estil però no una mida, la vora sí que és veurà, ja que el valor per defecte de border-width és medium.

Nota: els estils per a les vores que impliquen relleu (groove, ridge, inset, outset) no es veuran bé si la mida és massa gran o massa petita. Per exemple, si és d'un pixel pràcticament no podrem distingir-los. O si és de 40px, el resultat serà molt estrany (prova-ho!). En general l'efecte 3D es veurà en condicions òptimes quan border-width tingui el valor 'medium', o una longitud equivalent, com ara 2-3px.

---

Com passava amb l'estil i el color, tenim una shortcut property per assignar el valor dels quatre costats al mateix temps: border-width. Com en els altres casos, pot tenir d'un a quatre valors que es distribueixen com ja hem vist anteriorment (pots recordar-ho revisant l'explicació dels marges).

H1 {
border-style: solid;
border-color: #8ea384;
border-width: 2px;
border-left-width: 8px;
padding: 3px; }

SPAN.propietat {
border-style: solid;
border-width: 1px 0;
background-color: silver;
padding: 0 4px; }

L'style sheet anterior genera resultats com el següent:

Shortcut properties

Ja hem vist totes les propietats border amb les corresponents shortcut properties border-style, border-color i border-width. Queden per veure només una nova sèrie de shortcut properties que ens permetran treballar de forma més ràpida amb les vores. Però no hi ha cap concepte nou, únicament hauràs d'aprendre una manera diferent d'assignar valors a les propietats border que hem vist fins ara.

---

Mitjançant les quatre propietats següents podem centrar-nos en un sol costat, i assignar-li al mateix temps la mida, l'estil i el color: border-top, border-right, border-bottom i border-left.

La sintaxi és la següent:

border-(costat): mida estil color;

on les paraules en cursiva seran un dels valors permesos per a cada propietat específica. Fixa't que les tres propietats específiques se separen per espais, com passa sempre amb les shortcut properties.

Pots especificar un, dos o tots tres valors, i en qualsevol ordre. Però recorda que el valor per defecte per l'estil és 'none', així que assegura't que n'hi assignes algun!

H1 {
border-top: 1px solid maroon;
border-bottom: 5px dotted red; }

---

Finalment comptem amb la propietat border, que permet assignar la mida, el color i l'estil als quatre costats de forma simultània.

H1 { border: 2px solid teal; }

La propietat anterior equival a border-width:2px, border-style:solid i border-color:teal.

Cal tenir present que si utilitzem la propietat border, tots els costats tindran la mateixa mida, color i estil. Ara bé, sempre la podem combinar amb propietats específiques que ens permetin matisar les característiques d'un costat en concret.