Γεννήτρια CSS Border Radius
Δημιουργήστε CSS border-radius οπτικά με ζωντανή προεπισκόπηση. Ρυθμίστε κάθε γωνία ξεχωριστά ή συνδέστε τις. Υποστήριξη px, % και rem. Αντιγράψτε κώδικα CSS. Δωρεάν online εργαλείο.
Προεπισκόπηση
Έξοδος CSS
Αναφορά
Τι είναι το CSS border-radius;
Η ιδιότητα CSS border-radius στρογγυλεύει τις γωνίες του εξωτερικού περιγράμματος ενός στοιχείου. Μπορείτε να ορίσετε μία ακτίνα για κυκλικές γωνίες ή δύο ακτίνες για ελλειπτικές γωνίες.
Σύνταξη border-radius
Η συντόμευση border-radius δέχεται 1 έως 4 τιμές. Με 1 τιμή, όλες οι γωνίες είναι ίσες. Με 2, η πρώτη ορίζει πάνω-αριστερά/κάτω-δεξιά και η δεύτερη πάνω-δεξιά/κάτω-αριστερά. Με 4 τιμές, κάθε γωνία ορίζεται ξεχωριστά: πάνω-αριστερά, πάνω-δεξιά, κάτω-δεξιά, κάτω-αριστερά.
Ελλειπτικές γωνίες
Χρησιμοποιώντας τη σύνταξη / (π.χ. border-radius: 50% / 30%), μπορείτε να ορίσετε διαφορετικές οριζόντιες και κάθετες ακτίνες για ελλειπτικές γωνίες.
Απόρρητο
Όλη η δημιουργία border-radius εκτελείται 100% στον browser σας. Κανένα δεδομένο δεν αποστέλλεται σε κανέναν server.