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

Γεννήτρια Border Radius CSS δωρεάν

Σχεδιάστε οπτικά στρογγυλεμένες γωνίες με ανεξάρτητο έλεγχο κάθε γωνίας. Υποστηρίζει τη σύνταξη ελλειπτικής X/Y για οργανικά σχήματα blob.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί
border-radius: 20px 20px 20px 20px;
Μονάδα

Συνηθισμένες χρήσεις

  • Οργανικά σχήματα BlobΧρησιμοποιήστε τη σύνταξη ελλειπτικής X/Y για να δημιουργήσετε μοναδικά σχήματα blob για ενότητες ήρωα και εικονογραφήσεις.
  • Γωνίες καρτών και δοχείωνΤυπικές στρογγυλεμένες γωνίες για κάρτες, δοχεία και πάνελ στο σύγχρονο σχεδιασμό UI.
  • Σχήματα Avatar και εικόνας προφίλΔημιουργήστε το σωστό στυλ γωνίας για εικόνες προφίλ: κυκλικό, squircle ή στρογγυλεμένο τετράγωνο.
  • Χάπια, ετικέτες και σήματαΔημιουργήστε κουμπιά χαπιών τέλεια στρογγυλεμένα, ετικέτες και σήματα με την προσέγγιση 9999.
  • Ασύμμετρα σχέδια γωνίαςΑνάμιξη ακτίνων σε γωνίες για δημιουργία χαρακτηριστικών, αναγνωρίσιμων σχημάτων καρτών και κουμπιών.

Πώς λειτουργεί

Η γεννήτρια border-radius εκτελείται εξ ολοκλήρου στον browser — χωρίς διακομιστή, βιβλιοθήκη ή μεταφόρτωση. Δημιουργεί τη συμβολοσειρά τιμής CSS border-radius απευθείας σε JavaScript με React state και useMemo και την εφαρμόζει ως inline style σε ένα ζωντανό στοιχείο div, ώστε η ίδια η μηχανή CSS του browser να αποδίδει το σχήμα σε πραγματικό χρόνο.

  1. 1
    Τα ρυθμιστικά γράφουν state
    Κάθε ρυθμιστικό γράφει σε μία από οκτώ αριθμητικές μεταβλητές state — τέσσερις οριζόντιες ακτίνες γωνιών και τέσσερις κάθετες για την ελλειπτική λειτουργία. Η ενιαία λειτουργία συμπτύσσει και τις οκτώ σε ένα ρυθμιστικό μέσω ενός βοηθού setAll που συγχρονίζει όλες τις τιμές ταυτόχρονα.
  2. 2
    Το useMemo συνθέτει την τιμή CSS
    Ένα useMemo hook υπολογίζει ξανά τη συμβολοσειρά border-radius όποτε αλλάζει οποιαδήποτε τιμή γωνίας, η μονάδα (px ή %) ή η ελλειπτική επιλογή. Στην τυπική λειτουργία παράγει τη συντομογραφία τεσσάρων τιμών· με την ελλειπτική ενεργή, προσθέτει τον διαχωριστή κάθετο για την πλήρη σύνταξη οκτώ τιμών — π.χ. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Η μηχανή CSS του browser αποδίδει την προεπισκόπηση
    Η υπολογισμένη συμβολοσειρά ορίζεται ως inline borderRadius style σε ένα απλό στοιχείο div. Η μηχανή διάταξης του browser κάνει όλη την απόδοση — χωρίς canvas, SVG ή κώδικα σχεδίασης τρίτων.
  4. 4
    Το Clipboard API αντιγράφει την έξοδο
    Το κλικ στην Αντιγραφή καλεί navigator.clipboard.writeText είτε με τη δήλωση CSS (border-radius: ...;) είτε με την αντίστοιχη κλάση arbitrary-value του Tailwind (rounded-[...]), ανάλογα με την επιλεγμένη μορφή.

Σχετικά εργαλεία

🎨

Γεννήτρια Box Shadow CSS

Οπτικός κατασκευαστής CSS box-shadow με ζωντανή προεπισκόπηση, στοίβαξη πολλαπλών επιπέδων, επιλογέα χρωμάτων, εναλλαγή inset και αντιγραφή με ένα κλικ. Περιλαμβάνει προεπιλογές Material, neumorphism και glow.

Δοκιμάστε το
🟦

Γεννήτρια CSS Grid

Σχεδιάστε οπτικά ένα CSS grid — tracks, units και gaps — και αντιγράψτε το generated CSS και HTML.

Δοκιμάστε το
↔️

Γεννήτρια CSS Flexbox

Πειραματιστείτε με κατεύθυνση flex, wrap, justify και align σε ζωντανά στοιχεία — και αντιγράψτε το CSS.

Δοκιμάστε το

Συχνές ερωτήσεις