Στρογγυλοποίηση των συνόρων ενός μπλοκ στο CSS

Τώρα θα μάθουμε πώς να στρογγυλεύουμε τις γωνίες ενός μπλοκ. Για αυτό πρέπει να χρησιμοποιήσουμε την ιδιότητα border-radius, που δέχεται μια τιμή σε pixels.

Τι σημαίνει ότι ορίσαμε στρογγυλοποίηση, για παράδειγμα, σε 10px; Αυτή είναι η ακτίνα του κύκλου, που μπορεί να εγγραφεί σε αυτή τη στρογγυλοποίηση. Αν δεν είστε καλοί στα μαθηματικά και δεν καταλαβαίνετε την τελευταία πρόταση - ξεχάστε την και απλά επιλέξτε τη στρογγυλοποίηση με το μάτι. Με κάποια εμπειρία αυτό δεν είναι πρόβλημα (μέσο μέτρησης για τη μέτρηση στρογγυλοποιήσεων δεν υπάρχει, τουλάχιστον εγώ δεν έχω ακούσει για κάτι τέτοιο).

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

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

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

Επαναλάβετε τη σελίδα σύμφωνα με αυτό το παράδειγμα: