CSS Borders - Ιδιότητα συντομογραφίας

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

Περίγραμμα CSS - Ιδιότητα συντομογραφίας

Όπως είδατε στην προηγούμενη σελίδα, υπάρχουν πολλές ιδιότητες που πρέπει να λάβετε υπόψη όταν ασχολείστε με τα σύνορα.

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

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

class="w3-codespan">border-width
class="w3-codespan">border-style (required)
class="w3-codespan">border-color

Παράδειγμα

p {	border: 5px solid red;
}

Αποτέλεσμα:

Some text

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>
</html>

Μπορείτε επίσης να καθορίσετε όλες τις μεμονωμένες ιδιότητες περιγράμματος μόνο για μία πλευρά:

Αριστερά σύνορα

p {	border-left: 6px solid red;
}

Αποτέλεσμα:

Some text

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>
</html>

Κάτω περίγραμμα

p {	border-bottom: 6px solid red;
}

Αποτέλεσμα:

Some text

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>

</body>
</html>