Μετάβαση στο περιεχόμενο

Γεννήτρια CSS Border Radius

Δημιουργήστε CSS border-radius οπτικά με ζωντανή προεπισκόπηση. Ρυθμίστε κάθε γωνία ξεχωριστά ή συνδέστε τις. Υποστήριξη px, % και rem. Αντιγράψτε κώδικα CSS. Δωρεάν online εργαλείο.

Προεπισκόπηση

12px
12px
12px
12px
Μονάδα

Έξοδος 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.