لائیو پیش منظر کے ساتھ CSS border-radius کو بصری طور پر بنائیں اور پروڈکشن کے لیے تیار کوڈ کاپی کریں۔

پیش منظر کونے کے ہینڈلز کو گھسیٹیں
CSS
border-radius: ;

100% نجی — سب کچھ آپ کے براؤزر میں چلتا ہے۔ کچھ بھی اپ لوڈ نہیں ہوتا۔

تمام کونے
px
px
ایلیمنٹ
پری سیٹس

CSS بارڈر ریڈیئس جنریٹر کے بارے میں

CSS بارڈر ریڈیئس جنریٹر ہلکے سے گول کارڈز سے لے کر نامیاتی blob اشکال تک ہر چیز بناتا ہے۔ پیش منظر پر براہِ راست کارنر ہینڈلز کو گھسیٹیں، یا ہر کونے کو عددی طور پر سیٹ کریں — بشمول مکمل آٹھ ویلیو والا سنٹیکس، جہاں ہر کونے کے الگ افقی اور عمودی ریڈیئس ہوتے ہیں۔ یہی دوسرا محور ہے جو انڈے، پتے، آنسو کی بوند اور blobs کو ممکن بناتا ہے۔

ایک link-corners ٹوگل تمام چار کونوں کو کلاسک یکساں گولائی کے لیے ہم آہنگ رکھتا ہے، جبکہ انہیں الگ کرنے سے ہر کونہ غیر متناسب اشکال کے لیے آزاد ہو جاتا ہے۔ بارہ پری سیٹس — rounded، pill، circle، squircle، دو blobs، leaf، egg، arch، teardrop، petal اور wave — دکھاتے ہیں کہ یہ خاصیت کیا کچھ کر سکتی ہے، اور ایک randomize بٹن مسلسل تازہ نامیاتی اشکال بناتا رہتا ہے۔

آپ یونٹ بدل سکتے ہیں، عنصر اور کینوس کو اپنے ڈیزائن سے میل کھانے کے لیے دوبارہ رنگ سکتے ہیں، اور خالی border-radius ویلیو یا مکمل CSS رول کاپی کر سکتے ہیں۔ یہ ٹول 100% کلائنٹ سائیڈ ہے — کچھ بھی اپ لوڈ نہیں ہوتا۔

CSS بارڈر ریڈیئس جنریٹر استعمال کرنے کا طریقہ

  1. پیش منظر پر کارنر ہینڈلز کو گھسیٹیں، یا ہر کونے کو الگ الگ ترمیم کرنے کے لیے "تمام کونے جوڑیں" بند کر دیں۔
  2. نامیاتی، blob جیسی اشکال کے لیے ہر کونے کا افقی اور عمودی ریڈیئس سیٹ کریں۔
  3. اپنا یونٹ منتخب کریں اور تناظر میں پیش منظر دیکھنے کے لیے عنصر اور پس منظر کے رنگ ایڈجسٹ کریں۔
  4. پری سیٹس آزمائیں — pill، squircle، blob، leaf، teardrop اور مزید — یا randomize دبائیں۔
  5. border-radius ویلیو یا مکمل CSS کاپی کریں۔

اکثر پوچھے جانے والے سوالات

سلیش سے پہلے کی ویلیوز چاروں کونوں کے افقی ریڈیئس ہیں؛ اس کے بعد کی ویلیوز عمودی ریڈیئس ہیں۔ ہر کونے میں ان دونوں محوروں کو مختلف بنانا ہی ایک سادہ گول باکس کو انڈے، پتے یا blob میں بدل دیتا ہے۔

circle کے لیے، ایک مربع عنصر کے ساتھ border-radius: 50% استعمال کریں۔ pill کے لیے، کسی بھی مستطیل کو اس کی اونچائی کے کم از کم نصف کے برابر ریڈیئس دیں — circle اور pill پری سیٹس دونوں کو فوری طور پر سیٹ کر دیتے ہیں۔

جی ہاں — border-radius عنصر کے باکس کو کاٹتا ہے، بشمول پس منظری تصاویر، اور overflow: hidden اس کٹاؤ کو چائلڈ مواد تک بڑھا دیتا ہے۔ کسی img عنصر پر blob ریڈیئس لگانا نامیاتی تصویری ماسک حاصل کرنے کا ایک تیز طریقہ ہے۔

جی ہاں، جب دونوں حالتوں کے یونٹس ہم آہنگ ہوں تو border-radius CSS transitions کے ساتھ ہموار طریقے سے تبدیل ہوتا ہے۔ ہوور پر دو blob ویلیوز کے درمیان اینیمیشن ایک مقبول نامیاتی morphing اثر ہے — دونوں حالتیں یہاں بنائیں اور ان کے درمیان transition کریں۔

جی ہاں، مکمل طور پر مفت اور نجی: یہ صرف آپ کے براؤزر میں چلتا ہے، بغیر اکاؤنٹ اور کہیں بھی ڈیٹا بھیجے بغیر۔

شیئر کریں

مقبول تلاشیں
css بارڈر ریڈیئس جنریٹر بارڈر ریڈیئس جنریٹر فینسی بارڈر ریڈیئس جنریٹر css گول کنارے جنریٹر بارڈر ریڈیئس css آن لائن ٹول بیضوی بارڈر ریڈیئس جنریٹر css بلاب شیپ جنریٹر بارڈر ریڈیئس پیش منظر ٹول
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔
مسئلہ رپورٹ کریں

اس مفت ٹول کو اپنی ویب سائٹ پر شامل کریں — نیچے دیا گیا کوڈ کاپی اور پیسٹ کریں۔