Βασικές αρχές της εργασίας με τα σύνορα στο CSS

Τώρα θα μάθουμε να προσθέτουμε σύνορα στα στοιχεία. Αυτό γίνεται με τη βοήθεια τριών ιδιοτήτων: η ιδιότητα border-width ορίζει το πάχος του συνόρου, η border-color - το χρώμα, και η border-style ορίζει τον τύπο του συνόρου.

Οι πρώτες δύο ιδιότητες λειτουργούν με προφανή τρόπο: η border-color δέχεται χρώματα στην ίδια μορφή όπως και η ιδιότητα color, και το πάχος του συνόρου ορίζεται σε pixels. Αλλά η ιδιότητα border-style δέχεται τιμές σε μορφή λέξεων-κλειδιών. Για παράδειγμα, η τιμή solid ορίζει μια συμπαγή γραμμή.

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

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

css#elem {
  border-width: 3px;    /* πάχος 3px */
  border-style: solid;  /* σε μορφή γραμμής */
  border-color: red;    /* κόκκινο χρώμα */
  width: 300px;
  height: 100px;
}

Результат:

Στα επόμενα μαθήματα θα εξετάσουμε την εργασία με τα σύνορα πιο λεπτομερώς.