Περίγραμμα στη CSS (CSS Border)

Περίγραμμα στη CSS (CSS Border)

Περίγραμμα στη 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; }

Αποτέλεσμα

Περίγραμμα στη CSS

Η ιδιότητα αυτή μπορεί να πάρει από μία ως τέσσερις τιμές.

Όταν δίνουμε μία τιμή αφορά και τις τέσσερις πλευρές του περιγράμματος.

Όταν δίνουμε δύο τιμές, η πρώτη τιμή αφορά τις οριζόντιες πλευρές του περιγράμματος ενώ η δεύτερη τιμή αφορά τις κάθετες πλευρές του.

Όταν δίνουμε τρεις τιμές, η πρώτη τιμή αφορά την πάνω πλευρά, η δεύτερη τιμή τις κάθετες πλευρές και η τρίτη τιμή την κάτω πλευρά του περιγράμματος.

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

Παράδειγμα

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; } /* πάνω δεξιά κάτω αριστερά */

Αποτέλεσμα

Περίγραμμα στη CSS

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; /* μπλε */
}

Αποτέλεσμα

Περίγραμμα στη CSS

Και σε αυτή την ιδιότητα μπορούμε να δώσουμε από μία ως τέσσερις  τιμές.

Παράδειγμα

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; /* πάνω δεξιά κάτω αριστερά */
}

Αποτέλεσμα

Περίγραμμα στη CSS

Border-width

Η ιδιότητα border-width ορίζει το πλάτος που θα έχουν οι πλευρές του περιγράμματος. Μπορούμε να χρησιμοποιήσουμε είτε pixels είτε τις λέξεις κλειδιά thin (λεπτό), medium (μέτριο), thick (παχύ).

Παράδειγμα

p.one {
  border-style: solid;
  border-width: 5px;
}
p.two {
  border-style: solid;
  border-width: medium;
}

Αποτέλεσμα

Περίγραμμα στη CSS

Και σε αυτή την ιδιότητα μπορούμε να δώσουμε από μία ως τέσσερις  τιμές.

Παράδειγμα

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; /* πάνω δεξιά κάτω αριστερά */
}

Αποτέλεσμα

Περίγραμμα στη CSS

Απάντηση

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