CSS Borders

Πίνακας περιεχομένων

Οι ιδιότητες περιγράμματος CSS σάς επιτρέπουν να καθορίσετε το στυλ, το πλάτος και το χρώμα του περιγράμματος ενός στοιχείου.

Έχω σύνορα από όλες τις πλευρές.

Έχω κόκκινο κάτω περίγραμμα.

Έχω στρογγυλεμένα περιγράμματα.

Έχω ένα μπλε αριστερό περίγραμμα.

Στυλ περιγράμματος CSS

Η ιδιότητα class="w3-codespan">στυλ περιγράμματος καθορίζει το είδος του περιγράμματος που θα εμφανίζεται.

Επιτρέπονται οι ακόλουθες τιμές:

class="w3-codespan">dotted: - Ορίζει ένα διακεκομμένο περίγραμμα
class="w3-codespan">solid: - Καθορίζει ένα συμπαγές περίγραμμα
class="w3-codespan">double: - Ορίζει διπλό περίγραμμα
class="w3-codespan">groove: - Καθορίζει ένα τρισδιάστατο αυλακωτό περίγραμμα. Το εφέ εξαρτάται από την τιμή χρώματος περιγράμματος
class="w3-codespan">ridge: - Καθορίζει ένα τρισδιάστατο περίγραμμα με ραβδώσεις. Το εφέ εξαρτάται από την τιμή χρώματος περιγράμματος
class="w3-codespan">inset: - Καθορίζει ένα τρισδιάστατο ένθετο περίγραμμα. Το εφέ εξαρτάται από την τιμή χρώματος περιγράμματος
class="w3-codespan">outset: - Καθορίζει ένα τρισδιάστατο αρχικό περίγραμμα. Το εφέ εξαρτάται από την τιμή χρώματος περιγράμματος
class="w3-codespan">none: - Δεν ορίζει σύνορα
class="w3-codespan">hidden: - Καθορίζει ένα κρυφό περίγραμμα

Η ιδιότητα class="w3-codespan">border-style μπορεί να έχει από μία έως τέσσερις τιμές (για το επάνω περίγραμμα, το δεξί περίγραμμα, το κάτω περίγραμμα και το αριστερό περίγραμμα).

Παράδειγμα

Επίδειξη των διαφορετικών στυλ περιγράμματος:

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;}
p.mix {border-style: dotted dashed solid double;}

Αποτέλεσμα:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
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;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Σημείωση: Καμία από τις ΑΛΛΕΣ ιδιότητες περιγράμματος CSS (για τις οποίες θα μάθετε περισσότερα στα επόμενα κεφάλαια) δεν θα έχει ΚΑΝΕΝΑ αποτέλεσμα εκτός εάν Η ιδιότητα class="w3-codespan">στυλ συνόρων έχει οριστεί!