Οι ιδιότητες border στον κώδικα CSS σας επιτρέπουν να καθορίσετε το στυλ, το πλάτος και το χρώμα του περιγράμματος ενός στοιχείου.
Υπάρχουν τρεις βασικές ιδιότητες που μπορείτε να χρησιμοποιήσετε για να καθορίσετε το περίγραμμα ενός στοιχείου:
border-style: Καθορίζει το στυλ του περιγράμματος (π.χ. solid, dashed, dotted κ.λπ.).border-width: Καθορίζει το πλάτος του περιγράμματος.border-color: Καθορίζει το χρώμα του περιγράμματος.
Εδώ είναι ένα παράδειγμα για τη χρήση των ιδιοτήτων border:
.element {
border-style: solid; /* Ορίζει το στυλ του περιγράμματος ως solid */
border-width: 2px; /* Ορίζει το πλάτος του περιγράμματος ως 2 pixels */
border-color: red; /* Ορίζει το χρώμα του περιγράμματος ως κόκκινο */
}
.container {
border-style: dashed; /* Ορίζει το στυλ του περιγράμματος ως dashed */
border-width: 1px; /* Ορίζει το πλάτος του περιγράμματος ως 1 pixel */
border-color: #000000; /* Ορίζει το χρώμα του περιγράμματος ως μαύρο (χρησιμοποιώντας HEX τιμή) */
}
.section {
border-style: dotted; /* Ορίζει το στυλ του περιγράμματος ως dotted */
border-width: 3px; /* Ορίζει το πλάτ
ος του περιγράμματος ως 3 pixels */
border-color: rgb(255, 0, 0); /* Ορίζει το χρώμα του περιγράμματος ως κόκκινο (χρησιμοποιώντας RGB τιμές) */
}
Στο παραπάνω παράδειγμα, καθορίζουμε το περίγραμμα των στοιχείων .element, .container και .section με τις ιδιότητες border-style, border-width και border-color. Μπορείτε να προσαρμόσετε τις τιμές των ιδιοτήτων αυτών για να επιτύχετε το επιθυμητό περίγραμμα για τα στοιχεία σας.
Η ιδιότητα border-style καθορίζει το είδος του περιγράμματος που θα εμφανιστεί για ένα στοιχείο.
Μπορείτε να ορίσετε μία από τις παρακάτω τιμές για την ιδιότητα border-style:
none: Χωρίς περίγραμμα (προεπιλεγμένη τιμή).solid: Συνεχής γραμμή περιγράμματος.dotted: Διακεκομμένη γραμμή περιγράμματος με τους κόμβους να είναι κουκκίδες.dashed: Διακεκομμένη γραμμή περιγράμματος με τους κόμβους να είναι παύλες.double: Διπλή γραμμή περιγράμματος.groove: Κελύφθηκαν γραμμές περιγράμματος με 3D εμφάνιση.ridge: Ανάγλυφες γραμμές περιγράμματος με 3D εμφάνιση.inset: Εμφανίζεται εσοχή στο περίγραμμα με 3D εμφάνιση.outset: Εμφανίζεται ανάπτυξη στο περίγραμμα με 3D εμφάνιση.hidden: Κρυφό περίγραμμα, το οποίο εξακολουθεί να αποθηκεύεται για σκοπούς αλληλεπίδρασης.
Για παράδειγμα:
.element {
border-style: solid; /* Ορίζει ένα συνεχές περίγραμμα */
}
.container {
border-style: dotted; /* Ορίζει ένα περίγραμμα με διακεκομμένη γραμμή */
}
.section {
border-style: dashed; /* Ορίζει ένα περίγραμμα με διακεκομμένη γραμμή */
}
Στο παραπάνω παράδειγμα, ορίζουμε το είδος του περιγράμματος για τα στοιχεία .element, .container και .section ως solid, dotted και dashed αντίστοιχα. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-style για να επιτύχετε το επιθυμητό στυλ περιγράμματος για τα στοιχεία σας.
[adinserter block=”2″]
Η ιδιότητα border-width καθορίζει το πλάτος των τεσσάρων περιγραμμάτων.
Μπορείτε να ορίσετε το πλάτος με μία συγκεκριμένη μέτρηση (σε px, pt, cm, em κ.λπ.) ή χρησιμοποιώντας μία από τις τρεις προκαθορισμένες τιμές: thin, medium ή thick.
Παρακάτω παρουσιάζονται παραδείγματα χρήσης της ιδιότητας border-width:
.element {
border-width: 1px; /* Ορίζει πλάτος περιγράμματος 1 pixel */
}
.container {
border-width: thin; /* Ορίζει λεπτό περίγραμμα */
}
.section {
border-width: medium; /* Ορίζει μεσαίο περίγραμμα */
}
Στα παραπάνω παραδείγματα, ορίζουμε το πλάτος των περιγραμμάτων για τα στοιχεία .element, .container και .section. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-width για να επιτύχετε το επιθυμητό πλάτος περιγράμματος για τα στοιχεία σας.
Η ιδιότητα border-width μπορεί να έχει από ένα έως τέσσερις τιμές (για το περίγραμμα της επάνω πλευράς, του δεξιού περιγράμματος, της κάτω πλευράς και του αριστερού περιγράμματος).
Η σειρά των τιμών ακολουθεί τη σειρά: top, right, bottom, left.
Μπορείτε να ορίσετε τιμές για κάθε πλευρά ξεχωριστά, όπως παρακάτω:
.element {
border-width: 2px 1px 3px 4px; /* Ορίζει πλάτος περιγράμματος 2px (επάνω), 1px (δεξιά), 3px (κάτω), 4px (αριστερά) */
}
.container {
border-width: 3px 3px; /* Ορίζει πλάτος περιγράμματος 3px (επάνω και κάτω), 3px (δεξιά και αριστερά) */
}
.section {
border-width: 1px; /* Ορίζει πλάτος περιγράμματος 1px για όλες τις πλευρές */
}
Στα παραπάνω παραδείγματα, ορίζουμε το πλάτος των περιγραμμάτων για τα στοιχεία .element, .container και .section χρησιμοποιώντας τις τιμές για κάθε πλευρά ξεχωριστά. Μπορείτε να προσαρμόσετε τις τιμές της ιδιότητας border-width για να επιτύχετε το επιθυμητό πλάτος περιγραμμάτων για τα στοιχεία σας.
Η ιδιότητα border-color χρησιμοποιείται για να ορίσετε το χρώμα των τεσσάρων περιγραμμάτων.
Μπορείτε να ορίσετε το χρώμα με τις εξής μεθόδους:
- Όνομα: Καθορίστε ένα όνομα χρώματος, όπως “red”.
- HEX: Καθορίστε μία HEX τιμή, όπως “#ff0000”.
- RGB: Καθορίστε μία RGB τιμή, όπως “rgb(255,0,0)”.
- HSL: Καθορίστε μία HSL τιμή, όπως “hsl(0, 100%, 50%)”.
- transparent: Καθορίστε το χρώμα ως διαφανές.
Παρακάτω παρουσιάζονται παραδείγματα χρήσης της ιδιότητας border-color:
.element {
border-color: red; /* Ορίζει το χρώμα περιγράμματος ως κόκκινο */
}
.container {
border-color: #ff0000; /* Ορίζει το χρώμα περιγράμματος ως κόκκινο (χρησιμοποιώντας HEX τιμή) */
}
.section {
border-color: rgb(255, 0, 0); /* Ορίζει το χρώμα περιγράμματος ως κόκκινο (χρησιμοποιώντας RGB τιμές) */
}
Στα παραπάνω παραδείγματα, ορίζουμε το χρώμα των περιγραμμάτων για τα στοιχεία .element, .container και .section με την ιδιότητα border-color. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-color για να επιτύχετε το επιθυμητό χρώμα περιγράμματος για τα στοιχεία σας.
[adinserter block=”3″]
Η ιδιότητα border-color μπορεί να έχει από ένα έως τέσσερα χρώματα (για το περίγραμμα της επάνω πλευράς, του δεξιού περιγράμματος, της κάτω πλευράς και του αριστερού περιγράμματος).
Η σειρά των χρωμάτων ακολουθεί τη σειρά: top, right, bottom, left.
Μπορείτε να ορίσετε χρώματα για κάθε πλευρά ξεχωριστά, όπως παρακάτω:
.element {
border-color: red green blue yellow; /* Ορίζει χρώματα περιγράμματος κόκκινο (επάνω), πράσινο (δεξιά), μπλε (κάτω), κίτρινο (αριστερά) */
}
.container {
border-color: red blue; /* Ορίζει χρώματα περιγράμματος κόκκινο (επάνω και κάτω), μπλε (δεξιά και αριστερά) */
}
.section {
border-color: red; /* Ορίζει χρώμα περιγράμματος κόκκινο για όλες τις πλευρές */
}
Στα παραπάνω παραδείγματα, ορίζουμε τα χρώματα των περιγραμμάτων για τα στοιχεία .element, .container και .section χρησιμοποιώντας τις τιμές για κάθε πλευρά ξεχωριστά. Μπορείτε να προσαρμόσετε τις τιμές της ιδιότητας border-color για να επιτύχετε το επιθυμητό χρώμα περιγράμματος για τα στοιχεία σας.
Το χρώμα του περιγράμματος μπορεί να καθοριστεί επίσης χρησιμοποιώντας μία δεκαεξαδική τιμή (HEX):
.element {
border-color: #ff0000; /* Ορίζει το χρώμα περιγράμματος ως κόκκινο (HEX τιμή) */
}
.container {
border-color: #00ff00; /* Ορίζει το χρώμα περιγράμματος ως πράσινο (HEX τιμή) */
}
.section {
border-color: #0000ff; /* Ορίζει το χρώμα περιγράμματος ως μπλε (HEX τιμή) */
}
Στα παραπάνω παραδείγματα, ορίζουμε το χρώμα των περιγραμμάτων για τα στοιχεία .element, .container και .section χρησιμοποιώντας τιμές HEX. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-color για να επιτύχετε το επιθυμητό χρώμα περιγράμματος για τα στοιχεία σας.
Το χρώμα του περιγράμματος μπορεί επίσης να καθοριστεί χρησιμοποιώντας τιμές RGB:
.element {
border-color: rgb(255, 0, 0); /* Ορίζει το χρώμα περιγράμματος ως κόκκινο (RGB τιμές) */
}
.container {
border-color: rgb(0, 255, 0); /* Ορίζει το χρώμα περιγράμματος ως πράσινο (RGB τιμές) */
}
.section {
border-color: rgb(0, 0, 255); /* Ορίζει το χρώμα περιγράμματος ως μπλε (RGB τιμές) */
}
Στα παραπάνω παραδείγματα, ορίζουμε το χρώμα των περιγραμμάτων για τα στοιχεία .element, .container και .section χρησιμοποιώντας τιμές RGB. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-color για να επιτύχετε το επιθυμητό χρώμα περιγράμματος για τα στοιχεία σας.
Μπορείτε επίσης να χρησιμοποιήσετε τιμές HSL:
.element {
border-color: hsl(0, 100%, 50%); /* Ορίζει το χρώμα περιγράμματος ως κόκκινο (HSL τιμές) */
}
.container {
border-color: hsl(120, 100%, 50%); /* Ορίζει το χρώμα περιγράμματος ως πράσινο (HSL τιμές) */
}
.section {
border-color: hsl(240, 100%, 50%); /* Ορίζει το χρώμα περιγράμματος ως μπλε (HSL τιμές) */
}
Στα παραπάνω παραδείγματα, ορίζουμε το χρώμα των περιγραμμάτων για τα στοιχεία .element, .container και .section χρησιμοποιώντας τιμές HSL. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-color για να επιτύχετε το επιθυμητό χρώμα περιγράμματος για τα στοιχεία σας.
Στα παραδείγματα που είδατε στις προηγούμενες σελίδες, διαπιστώσατε ότι είναι δυνατόν να καθορίσετε ένα διαφορετικό περίγραμμα για κάθε πλευρά.
[adinserter block=”4″]
Στη CSS, υπάρχουν επίσης ιδιότητες για την καθορισμό κάθε πλευράς ξεχωριστά (επάνω, δεξιά, κάτω και αριστερά):
border-top: Καθορίζει το περίγραμμα της επάνω πλευράς.border-right: Καθορίζει το περίγραμμα της δεξιάς πλευράς.border-bottom: Καθορίζει το περίγραμμα της κάτω πλευράς.border-left: Καθορίζει το περίγραμμα της αριστερής πλευράς.
Μπορείτε να χρησιμοποιήσετε αυτές τις ιδιότητες για να καθορίσετε ένα διαφορετικό περίγραμμα για κάθε πλευρά του στοιχείου.
Παράδειγμα χρήσης:
.element {
border-top: 2px solid red; /* Καθορίζει ένα περίγραμμα 2px solid κόκκινο για την επάνω πλευρά */
border-right: 1px dashed blue; /* Καθορίζει ένα περίγραμμα 1px dashed μπλε για τη δεξιά πλευρά */
border-bottom: 3px dotted green; /* Καθορίζει ένα περίγραμμα 3px dotted πράσινο για την κάτω πλευρά */
border-left: 1.5px solid orange; /* Καθορίζει ένα περίγραμμα 1.5px solid πορτοκαλί για την αριστερή πλευρά */
}
Στο παραπάνω παράδειγμα, καθορίζουμε διαφορετικά περιγράμματα για την επάνω, δεξιά, κάτω και αριστερή πλευρά του στοιχείου .element. Μπορείτε να προσαρμόσετε τις τιμές των ιδιοτήτων border-top, border-right, border-bottom και border-left για να επιτύχετε το επιθυμητό περίγραμμα για τα στοιχεία σας.
Όπως είδατε στην προηγούμενη σελίδα, υπάρχουν πολλές ιδιότητες που πρέπει να λάβετε υπόψη όταν ασχολείστε με περιγράμματα.
Για να μειώσετε τον κώδικα, είναι επίσης δυνατόν να καθορίσετε όλες τις ξεχωριστές ιδιότητες περιγραμμάτων σε μία ιδιότητα.
Η ιδιότητα border είναι μια συντομογραφία για τις ακόλουθες ξεχωριστές ιδιότητες περιγραμμάτων:
border-widthborder-style(απαιτείται)border-color
Παράδειγμα χρήσης:
.element {
border: 1px solid red; /* Ορίζει ένα περίγραμμα 1px solid κόκκινο για όλες τις πλευρές */
}
.container {
border: 2px dashed blue; /* Ορίζει ένα περίγραμμα 2px dashed μπλε για όλες τις πλευρές */
}
.section {
border: 3px dotted green; /* Ορίζει ένα περίγραμμα 3px dotted πράσινο για όλες τις πλευρές */
}
Στα παραπάνω παραδείγματα, χρησιμοποιούμε τη συντομογραφία border για να ορίσουμε ένα περίγραμμα για τα στοιχεία .element, .container και .section. Μπορείτε να προσαρμόσετε τις τιμές της ιδιότητας border για να επιτύχετε το επιθυμητό περίγραμμα για τα στοιχεία σας.
Η ιδιότητα border-radius χρησιμοποιείται για να προσθέσετε στρογγυλεμένα περίγραμματα σε ένα στοιχείο:
.element {
border-radius: 10px; /* Ορίζει ένα στρογγυλεμένο περίγραμμα με ακτίνα 10px */
}
.container {
border-radius: 50%; /* Ορίζει ένα κυκλικό στρογγυλεμένο περίγραμμα */
}
.section {
border-radius: 20px 10px 30px 5px; /* Ορίζει ένα στρογγυλεμένο περίγραμμα με διαφορετικές ακτίνες για κάθε πλευρά */
}
Στα παραπάνω παραδείγματα, χρησιμοποιούμε την ιδιότητα border-radius για να προσθέσουμε στρογγυλεμένα περίγραμματα στα στοιχεία .element, .container και .section. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας border-radius για να επιτύχετε την επιθυμητή σχήματος περιγράμματος για τα στοιχεία σας.