Ιδιότητα border-radius

Η ιδιότητα border-radius δημιουργεί στρογγυλεμένες γωνίες για το περίγραμμα και το φόντο. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες μεγέθους. Προεπιλεγμένη τιμή: 0. Είναι μια συντόμευση για τις ιδιότητες border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Σύνταξη

επιλογέας {
	border-radius: τιμή;
}

Αριθμός τιμών

Η ιδιότητα μπορεί να πάρει 1, 2, 3 ή 4 τιμές, που ορίζονται με κενό:

Αριθμός	Περιγραφή
`1`	Για όλες τις γωνίες ταυτόχρονα.
`2`	Η πρώτη τιμή ορίζει τη στρογγυλοποίηση για την πάνω δεξιά και την κάτω αριστερή γωνία, η δεύτερη - για την πάνω αριστερή και την κάτω δεξιά.
`3`	Η πρώτη τιμή ορίζει τη στρογγυλοποίηση για την πάνω αριστερή γωνία, η δεύτερη - ταυτόχρονα για την πάνω δεξιά και την κάτω αριστερή, και η τρίτη - για την κάτω δεξιά γωνία.
`4`	Η πρώτη τιμή ορίζει τη στρογγυλοποίηση για την πάνω αριστερή γωνία, η δεύτερη - για την πάνω δεξιά, η τρίτη - για την κάτω δεξιά γωνία, και η τέταρτη - για την κάτω αριστερή γωνία.

Ελλειπτική στρογγυλοποίηση

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

επιλογέας {
	border-radius: οριζόντια / κατακόρυφη;
}

Εάν οριστούν στρογγυλοποιήσεις για πολλές γωνίες, τότε πριν την κάθετο παρατίθενται όλες οι οριζόντιες στρογγυλοποιήσεις, και μετά από αυτήν - όλες οι κατακόρυφες.

Παράδειγμα

Ας ορίσουμε στρογγυλοποίηση 10px για όλες τις γωνίες:

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

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Παράδειγμα

Ας δούμε πώς φαίνονται οι στρογγυλοποιήσεις για περίγραμμα σε μορφή κουκκίδων:

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

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Παράδειγμα

Ας ορίσουμε στρογγυλοποίηση σε 10px για γωνίες μιας διαγωνίου, και στρογγυλοποιήσεις σε 40px - για γωνίες της δεύτερης διαγωνίου:

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

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Παράδειγμα

Ας ορίσουμε στρογγυλοποίηση σε 10px για την πάνω αριστερή γωνία, στρογγυλοποίηση σε 30px για την κάτω δεξιά γωνία, και στρογγυλοποιήσεις σε 50px - για γωνίες της δεύτερης διαγωνίου:

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

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Παράδειγμα

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

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

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Παράδειγμα

Ας κάνουμε ελλειπτική στρογγυλοποίηση, ορίζοντας 20px για το οριζόντιο μέρος της στρογγυλοποίησης, και 40px - για το κατακόρυφο:

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

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Παράδειγμα

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

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

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Παράδειγμα

Εάν για ένα τετράγωνο στοιχείο οριστεί στρογγυλοποίηση, ίση με το μισό της πλευράς του τετραγώνου, τότε θα προκύψει κύκλος:

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

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Παράδειγμα

Εάν οριστεί στρογγυλοποίηση, μεγαλύτερη από την πλευρά του τετραγώνου, και πάλι θα προκύψει κύκλος:

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

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Παράδειγμα

Κύκλος μπορεί επίσης να προκύψει, εάν οριστεί border-radius σε 50% (το πλεονέκτημα είναι ότι κατά την αλλαγή των διαστάσεων του τετραγώνου δεν χρειάζεται να αλλάξει η στρογγυλοποίηση):

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

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Παράδειγμα

Εάν οριστεί το border-radius σε ποσοστά για ένα ορθογώνιο, τότε θα προκύψει ελλειπτική στρογγυλοποίηση. Εάν το πλάτος οριστεί σε 400px, το ύψος σε 200px, και το border-radius σε 10%, τότε αυτό είναι ισοδύναμο με 40px/20px:

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

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Παράδειγμα

Ας ορίσουμε τιμή border-radius σε 50% για ορθογώνιο - θα προκύψει έλλειψη:

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

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Παράδειγμα

Η ιδιότητα border-radius στρογγυλεύει όχι μόνο τις γωνίες του περιγράμματος, αλλά και του φόντου:

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

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Δείτε επίσης

η ιδιότητα border,
που είναι μια συντόμευση για το περίγραμμα