CodeKitHubΤι είναι αυτό το εργαλείο;
Το border-radius είναι η ιδιότητα CSS που στρογγυλεύει τις γωνίες ενός στοιχείου. Γραμμένη με το χέρι παίρνει τέσσερις τιμές με σταθερή σειρά — πάνω-αριστερά, πάνω-δεξιά, κάτω-δεξιά, κάτω-αριστερά — που είναι εύκολο να μπερδέψεις, ειδικά όταν οι τέσσερις γωνίες διαφέρουν.
Αυτό το εργαλείο αφαιρεί τον πειραματισμό: μετακίνησε ένα ρυθμιστικό, δες τη γωνία να στρογγυλεύει στη ζωντανή προεπισκόπηση, και διάβασε το ακριβές CSS από το κουτί δημιουργημένου κώδικα. Ένα απλό κουμπί κλειδώματος εναλλάσσεται ανάμεσα σε ομοιόμορφη ακτίνα (και οι τέσσερις γωνίες ίδιες, η πιο κοινή περίπτωση) και τέσσερα ανεξάρτητα ρυθμιστικά για οργανικά, ασύμμετρα σχήματα.
Γιατί να το χρησιμοποιήσετε;
- Η ζωντανή προεπισκόπηση ενημερώνεται άμεσα καθώς σέρνεις — χωρίς επεξεργασία CSS και ανανέωση για να δεις το αποτέλεσμα.
- Κλείδωμα με ένα κλικ για την κοινή περίπτωση 'ίδια ακτίνα σε κάθε γωνία'· ξεκλείδωμα για κουμπιά χάπι, φυσαλίδες ομιλίας και σχήματα φυσαλίδας.
- Παράγει τη συντετμημένη μορφή μίας τιμής όταν όλες οι γωνίες ταιριάζουν, ή την πλήρη μορφή τεσσάρων τιμών όταν δεν ταιριάζουν — έτοιμο για αντιγραφή-επικόλληση και στις δύο περιπτώσεις.
- Τρέχει εξ ολοκλήρου στο πρόγραμμά σου περιήγησης. Τίποτα από όσα εισάγεις δεν αποστέλλεται πουθενά.
- Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητό.
Πώς χρησιμοποιείται
- Άφησε το 'κλείδωμα όλων των γωνιών' επιλεγμένο και σύρε οποιοδήποτε ρυθμιστικό για να ορίσεις μια ομοιόμορφη ακτίνα για ολόκληρο το κουτί.
- Αποεπίλεξε το κλείδωμα για να ελέγξεις κάθε γωνία ανεξάρτητα — χρήσιμο για σχήματα χαπιού, δάκρυα και ασύμμετρες κάρτες.
- Παρακολούθησε το κουτί προεπισκόπησης να ενημερώνεται ζωντανά καθώς προσαρμόζεις κάθε ρυθμιστικό.
- Αντέγραψε το δημιουργημένο CSS από το κουτί κώδικα και επικόλλησέ το στο φύλλο στιλ σου.
Παράδειγμα
Είσοδος
Πάνω-αριστερά: 40px, Πάνω-δεξιά: 8px, Κάτω-δεξιά: 40px, Κάτω-αριστερά: 8pxΈξοδος
border-radius: 40px 8px 40px 8px;Αντίθετες γωνίες που δεν ταιριάζουν όπως αυτή δημιουργούν ένα περίγραμμα φύλλου ή πέταλου — ένα κοινό εφέ στον σχεδιασμό καρτών και σημάτων.
px ή % — ποια μονάδα να χρησιμοποιήσω;
Αυτός ο δημιουργός παράγει τιμές σε pixel, που είναι η σωστή προεπιλογή για τις περισσότερες εργασίες UI: κουμπιά, κάρτες και πεδία εισαγωγής όπου θέλεις μια σταθερή, προβλέψιμη ακτίνα γωνίας ανεξάρτητα από το μέγεθος του στοιχείου.
Τα ποσοστά συμπεριφέρονται διαφορετικά — είναι σχετικά με το ίδιο πλάτος και ύψος του στοιχείου, οπότε μια ακτίνα 50% σε τετράγωνο στοιχείο παράγει τέλειο κύκλο, και σε μη τετράγωνο στοιχείο παράγει έλλειψη. Αν θέλεις αυτό το εφέ (avatar, σχήματα φυσαλίδας που κλιμακώνονται με τον περιέκτη), πάρε το δημιουργημένο CSS και αντάλλαξε τις τιμές px με τιμή % με το χέρι — για παράδειγμα border-radius: 50% μετατρέπει οποιοδήποτε τετράγωνο κουτί σε κύκλο.
Κοινά μοτίβα border-radius
- Στρογγυλεμένη κάρτα: όλες οι γωνίες ίσες, περίπου 8–16px για στοιχεία UI.
- Κουμπί χάπι: όρισε την ακτίνα στο μισό του ύψους του στοιχείου (ή απλώς χρησιμοποίησε 9999px, που περιορίζεται σε πλήρες χάπι ανεξάρτητα από το ύψος).
- Κυκλικό avatar: border-radius: 50% σε τετράγωνο (ίσο πλάτος και ύψος) στοιχείο.
- Φυσαλίδα ομιλίας: τρεις γωνίες στρογγυλεμένες, μία γωνία αιχμηρή — όρισε τρία ρυθμιστικά ψηλά και ένα στο 0.
- Σχήμα φύλλου / πέταλου: αντίθετες γωνίες να ταιριάζουν, γειτονικές γωνίες διαφορετικές — π.χ. πάνω-αριστερά και κάτω-δεξιά και οι δύο μεγάλες, πάνω-δεξιά και κάτω-αριστερά και οι δύο μικρές.
Συνδυασμός με σκιά
Οι στρογγυλεμένες γωνίες σπάνια εμφανίζονται μόνες τους — οι κάρτες και τα κουμπιά συνήθως χρειάζονται και λίγη σκιά για βάθος. Χρησιμοποίησε τον Δημιουργό Box Shadow για να ρυθμίσεις μια σκιά και εφάρμοσε και τα δύο κομμάτια δημιουργημένου CSS στο ίδιο στοιχείο.
Συχνές ερωτήσεις
Ποια είναι η διαφορά ανάμεσα στο border-radius και τη σειρά γωνιών;
Η συντετμημένη CSS ακολουθεί πάντα πάνω-αριστερά, πάνω-δεξιά, κάτω-δεξιά, κάτω-αριστερά με αυτή τη σειρά, δεξιόστροφα ξεκινώντας από την πάνω-αριστερά. Τα τέσσερα ρυθμιστικά αυτού του εργαλείου έχουν ετικέτες που ταιριάζουν, οπότε δεν χρειάζεται ποτέ να θυμάσαι τη σειρά μόνος σου.
Μπορώ να χρησιμοποιήσω διαφορετικές μονάδες για κάθε γωνία;
Ναι, στην πραγματική CSS μπορείς να αναμείξεις px, %, em και rem ανάμεσα στις γωνίες, αν και είναι σπάνιο στην πράξη. Αυτό το εργαλείο παράγει ομοιόμορφες τιμές px για απλότητα — αντάλλαξε οποιαδήποτε μεμονωμένη τιμή σε % ή άλλη μονάδα απευθείας στο φύλλο στιλ σου αν χρειάζεσαι μικτές μονάδες.
Γιατί το border-radius: 50% μερικές φορές φτιάχνει οβάλ αντί για κύκλο;
Επειδή τα ποσοστά είναι σχετικά με κάθε άξονα ανεξάρτητα — η οριζόντια ακτίνα είναι ποσοστό του πλάτους του στοιχείου, η κάθετη ακτίνα ποσοστό του ύψους του. Σε τετράγωνο στοιχείο (ίσο πλάτος και ύψος) αυτό παράγει τέλειο κύκλο· σε ορθογώνιο παράγει έλλειψη.
Λειτουργεί το border-radius και σε εικόνες φόντου και περιγράμματα;
Ναι — το border-radius κόβει το φόντο, το περίγραμμα, και (σε σύγχρονα προγράμματα περιήγησης) τη σκιά κουτιού του στοιχείου στο στρογγυλεμένο σχήμα. Δεν κόβει το θυγατρικό περιεχόμενο που υπερχειλίζει εκτός αν ορίσεις επίσης overflow: hidden στον γονέα.
Υπάρχει όριο στο πόσο μεγάλη μπορεί να είναι η ακτίνα;
Κανένα σκληρό όριο — αν η ακτίνα υπερβεί το μισό του πλάτους ή του ύψους του στοιχείου, τα προγράμματα περιήγησης την περιορίζουν ώστε οι δύο καμπύλες σε εκείνη την πλευρά να συναντηθούν ακριβώς στη μέση, κάτι που είναι το πώς ένα τετράγωνο γίνεται τέλειος κύκλος ή σχήμα χαπιού.
Πώς φτιάχνω σχήμα χαπιού ή τέλειο κύκλο;
Για σχήμα χαπιού (κάψουλα), όρισε την ακτίνα σε τουλάχιστον το μισό του ύψους του στοιχείου — το κοινό κόλπο είναι border-radius: 9999px, που λειτουργεί σε οποιοδήποτε ύψος επειδή το πρόγραμμα περιήγησης περιορίζει αυτόματα την καμπύλη. Ένας τέλειος κύκλος χρειάζεται δύο πράγματα: ίσο πλάτος και ύψος, συν border-radius: 50%.