Κεφάλαιο 13: Περίγραμμα

Border

Μπορείτε να αλλάξετε το χρώμα, τη μορφή και το πλάτος του περιγράμματος ενός στοιχείου μέσα σε μια σελίδα με μια μόνο δήλωση με τη δήλωση της ιδιότητας border όπως στο παράδειγμα που ακολουθεί:

border : width style color;

όπου οι τιμές που μπορεί να πάρει είναι οι ακόλουθες :

Width

Το πλάτος του περιγράμματος

Style

Η μορφή του περιγράμματος που μπορεί να είναι μια από τις ακόλουθες τιμές:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

Color

Το χρώμα του περιγράμματος που μπορεί να είναι μία από τις ακόλουθες τιμές

Το όνομα ενός χρώματος (red, green, yellow)
Μια δεκαεξαδική τιμή (#FF0, #FFFF00)
Μια τιμή rgb ( rgb(255, 255, 0) )
Μια διαφάνεια

Εναλλακτικά μπορείτε αν θέλετε να ορίσετε κάθε μία από αυτές τις ιδιότητες ξεχωριστά με τις ιδιότητες που ακολουθούν παρακάτω.

Border color

Μπορείτε να ορίσετε το χρώμα του περιγράμματος ενός στοιχείου με την ιδιότητα border-color όπως στο παράδειγμα που ακολουθεί:

border-color: value;

και οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες:

Το όνομα ενός χρώματος (red, green, yellow)
Μια δεκαεξαδική τιμή (#FF0, #FFFF00)
Μια τιμή rgb ( rgb(255, 255, 0) )
Μια διαφάνεια

Border style

Μπορείτε να ορίσετε τη μορφή του περιγράμματος ενός στοιχείου με την ιδιότητα border-style όπως στο παράδειγμα που ακολουθεί:

border-style: value;

και οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

Border Width

Μπορείτε να ορίσετε το πλάτος του περιγράμματος ενός στοιχείου με την ιδιότητα border-width όπως στο παράδειγμα που ακολουθεί:

border-width: value;

ενώ οι τιμές μπορούν να είναι οι ακόλουθες

πλάτος
thin
medium
thick

Επίσης με τον ίδιο τρόπο που μπορείτε να αλλάξετε τη μορφή του περιγράμματος ενός στοιχείου μπορείτε να αλλάξετε και τη μορφή του περιγράμματος σε κάθε πλευρά του στοιχείου ξεχωριστά χρησιμοποιώντας αντίστοιχα τις ακόλουθες ιδιότητες.

border-bottom: width style color;
border-bottom-color: value;
border-bottom-style: value;
border-bottom-width: value;

border-left: width style color;
border-left-color: value;
border-left-style: value;
border-left-width: value;

border-top: width style color;
border-top-color: value;
border-top-style: value;
border-top-width: value;

border-right: width style color;
border-right-color: value;
border-right-style: value;
border-right-width: value;

Προηγούμενο : Φόντο
Επόμενο : CSS λίστες