Ιδιότητα border-radius

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

Σύνταξη

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

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

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

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

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

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

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

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης