Στην ενότητα αυτή θα δούμε πως, με χρήση CSS, ορίζουμε πλαίσιο γύρω απο τα στοιχεία μιας σελίδας. Η παρακάτω παράγραφος περικλείεται από πλαίσιο πάχους 5px και χρώματος κόκκινου:

Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.

Πάχος γραμμής του πλαισίου

Με την ιδιότητα border-width ορίζουμε το πάχος του πλαισίου. Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
  • αριθμός σε px (pixels)
  • μια από τις τιμές thin (πολύ λεπτή γραμμή), medium (μεσαίου μεγέθους γραμμή) ή thick (πολύ χοντρή γραμμή)
Η ιδιότητα border-width δεν δουλεύει αν δεν υπάρχει στο ίδιο css στυλ και η ιδιότητα border-style, την οποία θα αναλύσουμε αμέσως παρακάτω

Εικόνα με πλαίσιο με πάχος 10px
img.image_double_border {
border-style: solid;
border-width: 10px;
}

Στυλ γραμμής του πλαισίου

Με την ιδιότητα border-style ορίζουμε το στυλ του πλαισίου γύρω από ένα στοιχείο.
Πλαίσιο με διακεκομμένη γραμμή
p.dotted {
border-style: dotted
}
Δείτε όλα τα διαθέσιμα στυλ που μπορεί να έχει ένα πλαίσιο

Χρώμα της γραμμής του πλαισίου

Με την ιδιότητα border-color ορίζουμε το χρώμα της γραμμής του πλαισίου γύρω από ένα στοιχείο. Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
  • το όνομα του χρώματος (πχ. yellow, green, black, red κτλ)
  • τιμή σε RGB (πχ. rgb(0,255,0)) ή σε Hex (πχ. #00ff00. Περισσότερες πληροφορίες για τις τιμές RGB και Hex θα βρείτε στην ενότητα Χρώματα της Σειράς Μαθημάτων HTML)
Πίνακας με πλαίσιο το οποίο έχει στυλ (border-style) solid, πάχος γραμμής (border-width) 3px και χρώμα (border-color) κόκκινο
table.table_with_border {
border-width: 3px;
border-style: solid;
border-color: red;
}

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

Η CSS μας δίνει την δυνατότητα να ορίσουμε διαφορετική εμφάνιση της γραμμής του πλαισίου για κάθε μία από τις τέσσερεις πλευρές του. Για παράδειγμα η εμφάνιση του πλαισίου της παρακάτω παραγράφου διαφέρει στις τέσσερεις πλευρές της.

Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.



Η σύνταξη των τριών ιδιοτήτων που είδαμε παραπάνω (border-width, border-style και border-color) μπορούν να γραφούν και με τους παρακάτω τρόπους ώστε να αναφέρονται μόνο σε ΜΙΑ πλευρά του πλαισίου:
border-top-width, border-right-width, border-bottom-width, border-left-width
border-top-style, border-right-style, border-bottom-style, border-left-style
border-top-color, border-right-color, border-bottom-color, border-left-color

Πίνακας με διαφορετική γραμμή πλαισίου στις τέσσερεις πλευρές του
p.table_with_border {
border-top-width: 3px;
border-top-style: solid;
border-top-color: red;
border-right-width: thick;
border-right-style: dotted;
border-right-color: #0045ff;
border-bottom-width: 10px;
border-bottom-style: dashed;
border-bottom-color: #ff0057;
border-left-width: 1px;
border-left-style: double;
border-left-color: grey;
}

Σύντομοι τρόποι σύνταξης των ιδιοτήτων border-width, border-style και border-color

Στο παραπάνω παράδειγμα είδαμε πως μπορούμε να γράψουμε τις ιδιότητες border-style, border-width και border-color ώστε να αναφέρονται σε συγκεκριμένη πλευρά του πλαισίου.

Η CSS μας δίνει την δυνατότητα να συντάξουμε τις τρεις αυτές ιδιότητες ώστε να χρησιμοποιούμε λιγότερες ιδιότητες για να πετύχουμε το ίδιο αποτέλεσμα. Πιο συγκεκριμένα, κάθε μια από τις τρεις αυτές ιδιότητες μπορεί να έχει από μια έως τέσσερεις τιμές οι οποίες αναφέρονται στις πλευρές του πλαισίου. Παρακάτω θα δούμε με παραδείγματα τους τρόπους σύνταξης της ιδιότητας border-style. Οι τρόποι σύνταξης αυτοί ισχύουν το ίδιο και για τις ιδιότητες border-width και border-color:
Ιδιότητα border-style με μία τιμή
p {
border-style: dotted;
}
Το πλαίσιο θα έχει γραμμή με στυλ dotted και στις τέσσερεις πλευρές του στοιχείου

Ιδιότητα border-style με δύο τιμές
p {
border-style: dotted solid;
}
Όταν η ιδιότητα έχει δύο τιμές, η πρώτη αναφέρεται στην πάνω και κάτω πλευρά, ενώ η δεύτερη στην δεξιά και αριστερή

Ιδιότητα border-style με τρεις τιμές
p {
border-style: dotted solid double;
}
Όταν η ιδιότητα έχει τρεις τιμές, η πρώτη αναφέρεται στην πάνω, η δεύτερη στην δεξιά και αριστερή και η τρίτη στην κάτω

Ιδιότητα border-style τέσσερεις τιμές
p {
border-style: dotted solid double dashed;
}
Όταν η ιδιότητα έχει τέσσερεις τιμές, η πρώτη αναφέρεται στην πάνω, η δεύτερη στην δεξιά, η τρίτη στην κάτω και η τέταρτη στην αριστερή


Δοκιμάστε τα παραπάνω παραδείγματα και με τις ιδιότητες border-width και border-style.

Στο παρακάτω παράδειγμα υπάρχουν δύο στυλ, το p.tropos1 και το p.tropos2 τα οποία επιφέρουν ακριβώς το ίδιο αποτέλεσμα στις δύο παραγράφους που εφαρμόζονται. Προσέξτε πόσο πιο σύντομος και πιο εύκολα διαχειρήσιμος είναι ο τρόπος σύνταξης του στυλ p.tropos2

Σύγκριση δύο τρόπων σύνταξης των ιδιοτήτων border-style, border-width και border-color
1. p.tropos1 {
2. border-top-width: 3px;
3. border-top-style: solid;
4. border-top-color: red;
5. border-right-width: thick;
6. border-right-style: dotted;
7. border-right-color: #0045ff;
8. border-bottom-width: 10px;
9. border-bottom-style: dashed;
10. border-bottom-color: #ff0057;
11.border-left-width: 1px;
12. border-left-style: double;
13. border-left-color: grey;
14. }
15.
16. p.tropos2 {
17. border-width: 3px thick 10px 1px;
18. border-style: solid dotted dashed double;
19. border-color: red #0045ff #ff0057 grey;
20. }

Στο παραπάνω παράδειγμα έχω προσθέσει τον αύξοντα αριθμό των γραμμών ώστε να μπορώ να αναφερθώ εύκολα σε κάθε γραμμή του παραδείγματος. Ας δούμε αναλυτικά το στυλ p.tropos2 και να το συγκρίνουμε με το στυλ p.tropos1 ώστε να γίνει πιο κατανοητή η σύντομη σύνταξη του στυλ p.tropos2:

Στην γραμμή 17 συνοψίζονται οι τιμές των ιδιοτήτων border-x-width (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 2, 5, 8 και 11.

Αντίστοιχα στην γραμμή 18 συνοψίζονται οι τιμές των ιδιοτήτων border-x-style (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 3, 6, 9 και 12.

Στην γραμμή 19 συνοψίζονται οι τιμές των ιδιοτήτων border-x-color (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 4, 7, 10 και 13.

Η ιδιότητα border

Στην ιδιότητα border συνοψίζονται οι ιδιότητες border-width, border-style και border-color με αυτήν ακριβώς την σειρά. Έτσι αντι να χρησιμοποιούμε σε ένα στυλ τις τρεις αυτές ιδιότητες, χρησιμοποιούμε μόνο την ιδιότητα border.

Σύγκριση δύο τρόπων ορισμού πλαισίου σε παράγραφο
p.tropos2 {
border-width: 3px;
border-style: solid;
border-color: red;
}

p.tropos3 {
border: 3px solid red;
}

Ιδιότητες της CSS για το πλαίσιο των στοιχείων

Οι ιδιότητες της CSS για τον ορισμό πλαισίων γύρω από κάποιο στοιχείο, μας επιτρέπουν να ορίσουμε το στυλ του πλασίου, το πάχος του και το χρώμα του.

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης των πλαισίων ενός στοιχείου της σελίδας:
ΙδιότηταΤιμέςΠεριγραφή
border border-width
border-style
border-color
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων των πλαισίων: border-width, border-style και border-color
Δοκίμασε το
border-color χρώμα Ορίζει το χρώμα του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-style
border-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Ορίζει το στυλ του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
border-width thin
medium
thick
αριθμός σε pixels
Ορίζει το μήκος του πλαισίου του στοιχείου της σελίδας.
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-style
border-bottom border-bottom-width
border-bottom-style
border-bottom-color
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της κάτω πλευράς του πλαισίου: border-bottom-width, border-bottom-style και border-bottom-color
Δοκίμασε το
border-bottom-color χρώμα Ορίζει το χρώμα της κάτω πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-bottom-style
border-bottom-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Ορίζει το στυλ της κάτω πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
border-bottom-width thin
medium
thick
αριθμός σε pixels
Ορίζει το μήκος της κάτω πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-bottom-style
border-left border-left-width
border-left-style
border-left-color
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της αριστερής πλευράς του πλαισίου: border-left-width, border-left-style και border-left-color
Δοκίμασε το
border-left-color χρώμα Ορίζει το χρώμα της αριστερής πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-left-style
border-left-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Ορίζει το στυλ της αριστερής πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
border-left-width thin
medium
thick
αριθμός σε pixels
Ορίζει το μήκος της αριστερής πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-left-style
border-right border-right-width
border-right-style
border-right-color
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της δεξιάς πλευράς του πλαισίου: border-right-width, border-right-style και border-right-color
Δοκίμασε το
border-right-color χρώμα Ορίζει το χρώμα της δεξιάς πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-right-style
border-right-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Ορίζει το στυλ της δεξιάς πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
border-right-width thin
medium
thick
αριθμός σε pixels
Ορίζει το μήκος της δεξιάς πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-right-style
border-top border-top-width
border-top-style
border-top-color
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της πάνω πλευράς του πλαισίου: border-top-width, border-top-style και border-top-color
Δοκίμασε το
border-top-color χρώμα Ορίζει το χρώμα της πάνω πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
border-top-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Ορίζει το στυλ της πάνω πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-top-style
border-top-width thin
medium
thick
αριθμός σε pixels
Ορίζει το μήκος της πάνω πλευράς του πλαισίου του στοιχείου της σελίδας
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-top-style

Παραδείγματα

Ορισμός πλαισίου σε εικονα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε μια εικόνα στην σελίδα μας.

Ορισμός πλαισίου στα κελιά ενός πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε κελιά του πίνακα.

Ορισμός πλαισίου σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε πίνακα

Ορισμός πλαισίου σε παράγραφο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε μια παράγραφο

Ορισμός πλαισίου στις επιλογές μιας λίστας
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε κάθε επιλογή μιας λίστας
Pin It