Περίγραμμα στη CSS
Μπορούμε να δημιουργήσουμε περίγραμμα στη CSS με την ιδιότητα border. Επίσης μπορούμε να ορίσουμε το στυλ (border-style), το χρώμα (border-color) και το πλάτος (border-width) του περιγράμματος που θα βάλουμε σ’ ένα στοιχείο.
Border-Style
Η ιδιότητα border-style προσδιορίζει το στυλ για το περίγραμμα στη CSS που θα χρησιμοποιήσουμε.
Τα είδη των περιγραμμάτων είναι τα εξής:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
Παράδειγμα
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
p.none { border-style: none; }
p.hidden { border-style: hidden; }Αποτέλεσμα
Η ιδιότητα αυτή μπορεί να πάρει από μία ως τέσσερις τιμές.
Όταν δίνουμε μία τιμή αφορά και τις τέσσερις πλευρές του περιγράμματος.
Όταν δίνουμε δύο τιμές, η πρώτη τιμή αφορά τις οριζόντιες πλευρές του περιγράμματος ενώ η δεύτερη τιμή αφορά τις κάθετες πλευρές του.
Όταν δίνουμε τρεις τιμές, η πρώτη τιμή αφορά την πάνω πλευρά, η δεύτερη τιμή τις κάθετες πλευρές και η τρίτη τιμή την κάτω πλευρά του περιγράμματος.
Τέλος όταν δώσουμε τέσσερις τιμές αυτές ορίζουν κατά σειρά την πάνω πλευρά, την δεξιά πλευρά, την κάτω πλευρά και την αριστερή πλευρά του περιγράμματος.
Παράδειγμα
p.mix1 { border-style: dotted; } /* πάνω δεξιά κάτω αριστερή */
p.mix2 { border-style: dotted dashed; } /* οριζόντιες κάθετες*/
p.mix3 { border-style: dotted dashed solid; } /* πάνω κάθετες κάτω */
p.mix4 { border-style: dotted dashed solid double; } /* πάνω δεξιά κάτω αριστερά */Αποτέλεσμα
Border-color
Η ιδιότητα border-color ορίζει το χρώμα που θα έχουν οι πλευρές του περιγράμματος. Μπορούμε να δώσουμε τιμή για το χρώμα είτε με το όνομα του χρώματος, είτε με rgb τιμή είτε με δεκαεξαδική τιμή.
Παράδειγμα
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: rgb(0, 255, 0); /* πράσινο */
}
p.three {
border-style: solid;
border-color: #0000FF; /* μπλε */
}Αποτέλεσμα
Και σε αυτή την ιδιότητα μπορούμε να δώσουμε από μία ως τέσσερις τιμές.
Παράδειγμα
p.mix1 {
border-style: solid;
border-color: red; /* πάνω δεξιά κάτω αριστερή */
}
p.mix2 {
border-style: solid;
border-color: red blue; /* οριζόντιες κάθετες*/
}
p.mix3 {
border-style: solid;
border-color: red blue green; /* πάνω κάθετες κάτω */
}
p.mix4 {
border-style: solid;
border-color: red blue green yellow; /* πάνω δεξιά κάτω αριστερά */
}Αποτέλεσμα
Border-width
Η ιδιότητα border-width ορίζει το πλάτος που θα έχουν οι πλευρές του περιγράμματος. Μπορούμε να χρησιμοποιήσουμε είτε pixels είτε τις λέξεις κλειδιά thin (λεπτό), medium (μέτριο), thick (παχύ).
Παράδειγμα
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}Αποτέλεσμα
Και σε αυτή την ιδιότητα μπορούμε να δώσουμε από μία ως τέσσερις τιμές.
Παράδειγμα
p.mix1 {
border-style: solid;
border-width: 5px; /* πάνω δεξιά κάτω αριστερή */
}
p.mix2 {
border-style: solid;
border-width: 5px 20px; /* οριζόντιες κάθετες*/
}
p.mix3 {
border-style: solid;
border-width: 5px 20px 10px; /* πάνω κάθετες κάτω */
}
p.mix4 {
border-style: solid;
border-width: 5px 20px 10px 15px; /* πάνω δεξιά κάτω αριστερά */
}Αποτέλεσμα
