مفت CSS Border Radius جنریٹر
ہر کونے پر آزادانہ کنٹرول کے ساتھ گول کونے بصری طور پر ڈیزائن کریں۔ نامیاتی blob اشکال کے لیے elliptical X/Y سنٹیکس کی حمایت کرتا ہے۔
border-radius: 20px 20px 20px 20px;
عام استعمالات
- نامیاتی بلاب شاپسہیرو سیکشنز اور مصور کے لیے منفرد بلاب شاپس بنانے کے لیے بیضوی X/Y سنٹیکس استعمال کریں۔
- کارڈ اور کنٹینر کونےجدید UI ڈیزائن میں کارڈز، کنٹینرز اور پینلز کے لیے معیاری گول کونے۔
- اوتار اور پروفائل تصویر شاپسپروفائل تصویروں کے لیے صحیح کونے کی شیلی بنائیں: سرکلر، squircle، یا گول مربع۔
- گولیاں، ٹیگز اور بیج9999 پری سیٹ کے ساتھ بالکل گول گولی بٹن، ٹیگز اور بیج بنائیں۔
- غیر متوازن کونے کے ڈیزائنزمنفرد، برانڈ شناخت کارڈ اور بٹن شاپس بنانے کے لیے کونوں میں radii ملائیں۔
یہ کیسے کام کرتا ہے
بارڈر ریڈیس جنریٹر مکمل طور پر براؤزر میں چلتا ہے — نہ سرور، نہ لائبریری، نہ اپ لوڈ۔ یہ React state اور useMemo سے براہ راست JavaScript میں CSS border-radius قدر بناتا ہے، پھر اسے ایک لائیو div عنصر پر inline style کے طور پر لگاتا ہے تاکہ براؤزر کا اپنا CSS انجن حقیقی وقت میں شکل بنائے۔
- 1سلائیڈرز state لکھتے ہیںہر رینج ان پٹ آٹھ عددی state متغیرات میں سے ایک میں لکھتا ہے — چار افقی کونوں کے ریڈیس اور بیضوی موڈ کے لیے چار عمودی۔ متحد موڈ setAll مددگار کے ذریعے آٹھوں کو ایک سلائیڈر میں سمیٹ دیتا ہے جو ہر قدر ایک ساتھ ہم آہنگ کرتا ہے۔
- 2useMemo CSS قدر جوڑتا ہےایک useMemo hook کسی بھی کونے کی قدر، اکائی (px یا %)، یا بیضوی ٹوگل بدلنے پر border-radius اسٹرنگ دوبارہ بناتا ہے۔ معیاری موڈ میں یہ چار قدروں والا مختصر نحو بناتا ہے؛ بیضوی آن ہونے پر مکمل آٹھ قدروں والے نحو کے لیے سلیش شامل کرتا ہے — مثلاً 32px 20px 20px 32px / 20px 32px 20px 32px۔
- 3براؤزر کا CSS انجن پیش منظر بناتا ہےحساب شدہ اسٹرنگ ایک سادہ div عنصر پر inline borderRadius style کے طور پر لگائی جاتی ہے۔ ساری رینڈرنگ براؤزر کا لے آؤٹ انجن کرتا ہے — نہ canvas، نہ SVG، نہ کوئی تیسرے فریق کا ڈرائنگ کوڈ۔
- 4Clipboard API آؤٹ پٹ کاپی کرتی ہےکاپی پر کلک کرنے سے navigator.clipboard.writeText چلتا ہے، منتخب فارمیٹ کے مطابق CSS ڈیکلریشن (border-radius: ...;) یا اس کے مساوی Tailwind arbitrary-value کلاس (rounded-[...]) کے ساتھ۔
متعلقہ ٹولز
CSS Box Shadow جنریٹر
لائیو پریویو، ملٹی لیئر اسٹیکنگ، کلر پکر، inset ٹوگل، اور ایک کلک کاپی کے ساتھ CSS box-shadow کا بصری بلڈر۔ Material، neumorphism، اور glow presets شامل ہیں۔
CSS گرڈ جنریٹر
CSS گرڈ کو بصری طور پر ڈیزائن کریں — ٹریکس، یونٹ اور gaps — اور تیار شدہ CSS اور HTML کو کاپی کریں۔
CSS Flexbox جنریٹر
flex سمت، wrap، justify اور align کے ساتھ براہ راست اشیاء کے ساتھ تجربہ کریں — اور CSS کو کاپی کریں۔