CSS border-color ιδιότητα

Ορισμός και χρήση

Η ιδιότητα border-color ορίζει τον χρώμα των τεσσάρων ορίων. Η ιδιότητα αυτή μπορεί να ορίσει από 1 έως 4 χρώματα.

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

παράδειγμα 1

border-color:red green blue pink;
  • Ο επάνω περιβόλος είναι κόκκινος
  • η δεξιά σειρά είναι πράσινη
  • Ο κάτω περιβόλος είναι μπλε
  • Ο αριστερός περιβόλος είναι ροζ

Παράδειγμα 2

border-color:red green blue;
  • Ο επάνω περιβόλος είναι κόκκινος
  • Ο δεξιός και ο αριστερός περιβόλος είναι πράσινοι
  • Ο κάτω περιβόλος είναι μπλε

Παράδειγμα 3

border-color:dotted red green;
  • Ο επάνω και ο κάτω περιβόλος είναι κόκκινοι
  • Ο δεξιός και ο αριστερός περιβόλος είναι πράσινοι

Παράδειγμα 4

border-color:red;
  • Όλοι οι τέσσερις περιβόλοι είναι κόκκινοι

Να θυμάστε ότι ο τύπος του περιβόλου δεν μπορεί να είναι none ή hidden, αλλιώς το περιβόλο δεν θα εμφανιστεί.

Σημείωση:Πάντα να δηλώνετε το atributo border-style πριν από το atributo border-color. Ο στοιχείο πρέπει να αποκτήσει το περιβόλο πριν από την αλλαγή του χρώματος.

Δείτε επίσης:

Εκμάθηση CSS:Οι περιφερικά στοιχεία του CSS

Εγχειρίδιο HTML DOM:Αtributo borderColor

Παράδειγμα

Ρυθμίστε το χρώμα των τεσσάρων περιβόλων:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Δοκιμάστε το εδώ

Γλώσσα CSS

border-color: χρώμα|transparent|initial|inherit;

Τιμή του atributo

Τιμή Περιγραφή
color_name Προτείνεται το χρώμα του περιβόλου να είναι σε μορφή ονόματος χρώματος (π.χ. red).
hex_number Προτείνεται το χρώμα του περιβόλου να είναι σε μορφή δεκαεξαδικού αριθμού (π.χ. #ff0000).
rgb_number Προτείνεται το χρώμα του περιβόλου να είναι σε μορφή rgb κώδικα (π.χ. rgb(255,0,0)).
transparent Προεπιλεγμένη τιμή. Το χρώμα του περιβόλου είναι διαφανές.
inherit Προτείνεται να κληρονομηθεί το χρώμα του περιβόλου από το γονικό στοιχείο.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: not specified
Επιλογή κληρονομικότητας: no
Έκδοση: CSS1
Γλώσσα JavaScript: object.style.borderColor="#FF0000 blue"

Περισσότερα παραδείγματα

Ρύθμιση του χρώματος των τεσσάρων περιβόλων
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε τον χρώμα των τεσσάρων περιβόλων. Μπορείτε να ρυθμίσετε από ένα έως τέσσερα χρώματα.

Υποστήριξη του περιηγητή

Τα αριθμήματα στην πίνακα δείχνουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως το atributo.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Σημείωση:O Internet Explorer 6 (και οι προηγούμενες εκδόσεις) δεν υποστηρίζει την τιμή του atributo "transparent".

Σημείωση:O Internet Explorer 7 και οι προηγούμενες εκδόσεις των περιηγητών δεν υποστηρίζουν την τιμή "inherit". Ο Internet Explorer 8 χρειάζεται !DOCTYPE. Ο Internet Explorer 9 υποστηρίζει "inherit".