Σύνορα - CSS-Κόλπα

Η borderιδιότητα είναι μια σύντομη σύνταξη σε CSS που δέχεται πολλαπλές τιμές για να σχεδιάσει μια γραμμή γύρω από το στοιχείο στο οποίο εφαρμόζεται.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Αξίες

Η borderιδιότητα δέχεται μία ή περισσότερες από τις ακόλουθες τιμές σε συνδυασμό:

border: || || 

• border-width: Καθορίζει το πάχος του περιγράμματος.
  • : Μια αριθμητική τιμή που μετράται με px, em, rem, vhκαι vwμονάδες.
  • thin: Το ισοδύναμο του 1px
  • medium: Το ισοδύναμο του 3px
  • thick: Το ισοδύναμο του 5px
• border-style: Καθορίζει τον τύπο της γραμμής που σχεδιάζεται γύρω από το στοιχείο, συμπεριλαμβανομένων:
  • solid: Μια σταθερή, συνεχής γραμμή.
  • none (προεπιλογή): Δεν έχει σχεδιαστεί γραμμή.
  • hidden: Σχεδιάζεται μια γραμμή, αλλά δεν είναι ορατή. Αυτό μπορεί να είναι βολικό για την προσθήκη λίγο επιπλέον πλάτους σε ένα στοιχείο χωρίς εμφάνιση περιγράμματος.
  • dashed: Μια γραμμή που αποτελείται από παύλες.
  • dotted: Μια γραμμή που αποτελείται από τελείες.
  • double: Σχεδιάζονται δύο γραμμές γύρω από το στοιχείο.
  • groove: Προσθέτει μια λοξότμηση με βάση την τιμή χρώματος με τρόπο που κάνει το στοιχείο να εμφανίζεται πιεσμένο στο έγγραφο.
  • ridge: Παρόμοιο με groove, αλλά αντιστρέφει τις τιμές χρώματος με τρόπο που κάνει το στοιχείο να φαίνεται ανυψωμένο.
  • inset: Προσθέτει έναν τόνο διαχωρισμού στη γραμμή που κάνει το στοιχείο να φαίνεται ελαφρώς πιεσμένο.
  • outset: Παρόμοιο με inset, αλλά αντιστρέφει τα χρώματα με τρόπο που κάνει το στοιχείο να φαίνεται ελαφρώς ανυψωμένο.
• color: Καθορίζει το χρώμα του περιγράμματος και αποδέχεται ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Οποιος	Οποιος	Οποιος	3.5+	4+	Οποιος	Οποιος

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####