Ιδιότητα border-color

Η ιδιότητα border-color ορίζει το χρώμα του περιγράμματος για όλες τις πλευρές ταυτόχρονα ή ξεχωριστά για κάθε πλευρά. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες για χρώμα. Προεπιλεγμένη τιμή: το ίδιο χρώμα με αυτό του κειμένου του μπλοκ.

Η ιδιότητα είναι μια συντομογραφία για τις ακόλουθες ιδιότητες: border-left-color, border-right-color, border-top-color, border-bottom-color.

Σύνταξη

cssεπιλογέας {
  border-color: χρώμα;
}

Αριθμός τιμών

Η ιδιότητα μπορεί να πάρει 1, 2, 3 ή 4 τιμές, που καθορίζονται με κενό:

Παράδειγμα

Ας βάψουμε το περίγραμμα του μπλοκ σε κόκκινο χρώμα:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  width: 300px;
  height: 100px;
}

Результат:

Παράδειγμα

Ας ορίσουμε κόκκινο περίγραμμα για την πάνω και κάτω πλευρά, και γαλάζιο για τη δεξιά και αριστερή πλευρά:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue;
  width: 300px;
  height: 100px;
}

Результат:

Παράδειγμα

Ας ορίσουμε κόκκινο περίγραμμα για την πάνω πλευρά, γαλάζιο για τη δεξιά, πράσινο για την κάτω, μαύρο για την αριστερή πλευρά:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Παράδειγμα

Ας ορίσουμε ταυτόχρονα διαφορετικό πάχος, τύπο και χρώμα περιγράμματος:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Παράδειγμα

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

html<div id="elem"></div>

css#elem {
  color: red;
  border-style: solid;
  border-width: 2px;
  width: 300px;
  height: 100px;
}

Результат:

Δείτε επίσης