Τι είναι το Δημιουργός CSS Border Radius;

Δωρεάν διαδικτυακός δημιουργός CSS border radius. Προσαρμόστε ακτίνες γωνίας για κάθε γωνία με οπτικά χειριστήρια.

Η ιδιότητα CSS border-radius ελέγχει τη στρογγυλότητα των γωνιών ενός στοιχείου και η ευελιξία της εκτείνεται πολύ πέρα από τα απλά στρογγυλεμένα ορθογώνια. Ρυθμίζοντας κάθε γωνία ξεχωριστά, μπορείτε να δημιουργήσετε χάπια, κύκλους, ασύμμετρα σχήματα και σύνθετες οργανικές μορφές — όλα με μία μόνο ιδιότητα CSS. Το CSS Border Radius Generator προσφέρει ξεχωριστό έλεγχο με ρυθμιστικό και για τις τέσσερις γωνίες, με ζωντανή προεπισκόπηση που ενημερώνεται άμεσα.

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

Τέσσερις προεπιλογές καλύπτουν τις πιο συνηθισμένες περιπτώσεις χρήσης. Το Circle δημιουργεί border-radius: 50% για έναν τέλειο κύκλο (ή έλλειψη σε μη τετράγωνα στοιχεία). Το Pill δημιουργεί ένα σχήμα με πλήρως στρογγυλεμένα άκρα (border-radius: 9999px), χρήσιμο για κουμπιά, ετικέτες (badges) και tags. Το Card εφαρμόζει μια διακριτική στρογγύλευση 8px, κατάλληλη για στοιχεία καρτών και δοχεία. Το Rounded εφαρμόζει στρογγύλευση 8px σε όλες τις γωνίες, κατάλληλη για κουμπιά και πεδία εισαγωγής.

Ο παραγόμενος κώδικας CSS εμφανίζει τη συντομευμένη σύνταξη. Αν και οι τέσσερις γωνίες έχουν την ίδια τιμή, εξάγεται μία μόνο τιμή (π.χ. border-radius: 8px). Αν οι γωνίες διαφέρουν, εξάγεται η σύνταξη τεσσάρων τιμών με δεξιόστροφη σειρά (επάνω-αριστερά, επάνω-δεξιά, κάτω-δεξιά, κάτω-αριστερά). Ο κώδικας είναι έτοιμος για αντιγραφή στο stylesheet σας.

Πραγματικά παραδείγματα χρήσης του Δημιουργός CSS Border Radius

Δημιουργία στρογγυλεμένου κουμπιού σε σχήμα χάπι

Το design system σας χρησιμοποιεί κουμπιά σε σχήμα χάπι με ύψος 24px και πλήρως στρογγυλεμένα άκρα. Επιλέξτε την προεπιλογή «Pill» για border-radius: 9999px. Η προεπισκόπηση του κουμπιού εμφανίζει το σχήμα χάπι. Αντιγράψτε το CSS και εφαρμόστε το στο στοιχείο του κουμπιού σας. Ρυθμίστε ξεχωριστά τις τιμές των γωνιών αν θέλετε μια πιο απαλή εμφάνιση.

Σχεδιασμός ασύμμετρου σχήματος για ενότητα Hero

Το Hero μιας σελίδας προσγείωσης χρειάζεται ένα ξεχωριστό σχήμα: επάνω-αριστερά 0px, επάνω-δεξιά 40px, κάτω-δεξιά 0px, κάτω-αριστερά 40px. Ρυθμίστε κάθε ρυθμιστικό γωνίας ξεχωριστά. Η προεπισκόπηση εμφανίζει ένα μοναδικό ασύμμετρο σχήμα. Το παραγόμενο CSS είναι border-radius: 0 40px 0 40px.

Δημιουργία κυκλικού avatar με ποσοστιαία ακτίνα

Το avatar ενός χρήστη είναι μια τετράγωνη εικόνα 64x64 pixels. Εναλλάξτε τη μονάδα σε % και ορίστε και τις τέσσερις γωνίες στο 50%. Η προεπισκόπηση εμφανίζει έναν τέλειο κύκλο. Το παραγόμενο CSS είναι border-radius: 50%, που λειτουργεί σε οποιοδήποτε τετράγωνο στοιχείο ανεξαρτήτως μεγέθους.

Γιατί να χρησιμοποιήσετε το Δημιουργός CSS Border Radius;

  • Individual control for all 4 corners
  • px and % unit toggle
  • Ζωντανά preview box
  • 4 presets: Circle, Pill, Card, Rounded

Πώς να χρησιμοποιήσετε το Δημιουργός CSS Border Radius — Βήμα προς βήμα

1

Προσαρμόστε sliders for each corner (top-left, top-right, bottom-right, bottom-left).

2

Ενεργοποιήστε between px and % units.

3

Preview the border radius live.

4

Αντιγράψτε the CSS code.

Σε ποιους ταιριάζει καλύτερα το Δημιουργός CSS Border Radius;

  • σχεδιασμός διεπαφής χρήστη
  • button styling
  • σχεδιασμός
  • ιστός

Επαγγελματικές συμβουλές για το Δημιουργός CSS Border Radius

  • 1Χρησιμοποιήστε τιμές σε pixels για στοιχεία σταθερού μεγέθους (κουμπιά, κάρτες), όπου η ακτίνα των γωνιών πρέπει να παραμένει σταθερή. Χρησιμοποιήστε ποσοστιαίες τιμές για responsive στοιχεία όπου η ακτίνα πρέπει να κλιμακώνεται με το στοιχείο.
  • 2Η προεπιλογή «Pill» χρησιμοποιεί πολύ μεγάλη τιμή σε pixels (9999px) αντί για 50%, επειδή το 50% σε ένα ορθογώνιο δημιουργεί έλλειψη, όχι χάπι. Η μεγάλη τιμή σε pixels εξασφαλίζει πλήρως στρογγυλεμένα άκρα σε κάθε ορθογώνιο στοιχείο.
  • 3Για ένα «squircle» (τετράγωνο με ελαφρώς στρογγυλεμένες γωνίες, δημοφιλές στο iOS), χρησιμοποιήστε περίπου 10-12% border-radius σε όλες τις γωνίες. Αυτό δημιουργεί πιο απαλή εμφάνιση από τις μικρές τιμές σε pixels.
  • 4Όταν χρησιμοποιείτε ποσοστιαίες τιμές, η ακτίνα υπολογίζεται σε σχέση με το πλάτος του στοιχείου (για αριστερά/δεξιά) και το ύψος (για επάνω/κάτω). Διαφορετικά ποσοστά στις οριζόντιες και τις κατακόρυφες γωνίες δημιουργούν ελλειπτικές γωνίες.

Δημιουργός CSS Border Radius — Συχνές ερωτήσεις

Τι είναι border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

Как to make a circle with css??

Ορίστε border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Δημιουργός CSS Border Radius really free to use?

Yes, Δημιουργός CSS Border Radius is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Έτοιμοι να χρησιμοποιήσετε το Δημιουργός CSS Border Radius;

Δωρεάν διαδικτυακό εργαλείο — λειτουργεί στο πρόγραμμα περιήγησής σας, χωρίς εγγραφή. Ξεκινήστε τώρα.

Δοκιμάστε το

Μπορεί επίσης να σας αρέσει

Δημιουργός CSS Gradient

Δημιουργήστε όμορφα φόντα CSS gradient. Γραμμικά, ακτινικά και κωνικά gradients.

Δοκιμάστε τώρα

Μετατροπέας Χρωμάτων HEX/RGB

Μετατρέψτε χρώματα μεταξύ μορφών HEX, RGB και HSL.

Δοκιμάστε τώρα

Δημιουργός CSS Box Shadow

Δημιουργήστε CSS box shadows με οπτικό επεξεργαστή.

Δοκιμάστε τώρα
Free Forever · No Sign-up

182 Free Tools at Your Fingertips

All free online tools for developers, designers, students, and creators. Every tool works in your browser — no sign-up, no data collection.

Browse All ToolsΔημιουργός CSS Border Radius