این ابزار درست کار نمیکند؟
دربارهٔ ابزار «گوشهٔ گرد برای CSS آنلاین»
این ابزار به شما کمک میکند مقادیر border-radius را با پیشنمایش بصری بسازید. از کنترلهای گوشه فردی برای شکلهای نامتقارن استفاده کنید، درصدها را برای اشکال بلاب ارگانیک بکشید، یا از پیشتنظیمات رایج (rounded، pill، circle) انتخاب کنید.
Border-radius به عناصر لبههای گرد میدهد. فراتر از گرد کردن یکنواخت ساده، طرحهای مدرن از شعاعهای بیضوی، مشخصات هر گوشه، و حتی درصدهای نامتقارن برای ایجاد اشکال ارگانیک استفادهشده در تصاویر و عناصر تزئینی استفاده میکنند.
خروجی در هر زمینه CSS کار میکند — دکمهها، کارتها، تصاویر، containerها. میتوانید به عنوان مختصرنویسی (border-radius: ...) یا طولانی برای هر گوشه بسته به ترجیح سبک خود کپی کنید.
چطور از این ابزار استفاده کنم؟
چطور یک مقدار border-radius چهارگوشهای بسازم؟
هر گوشه را تنظیم کنید
«Top-left»، «Top-right»، «Bottom-right»، «Bottom-left» هرکدام مقدار pixel برای radius آن گوشه میپذیرند. ترتیب با shorthand CSS مطابقت دارد: از top-left شروع و در جهت ساعتگرد.
«اجرا» را بزنید
خروجی یک فیلد `css` است: `<tl>px <tr>px <br>px <bl>px`. بهعنوان مقدار `border-radius:` بچسبانید. اگر هر چهار مقدار یکسان باشند میتوانید به یک عدد کوتاه کنید، اما ابزار همیشه فرم کامل 4-مقدار را emit میکند.
ترفندهای نامتقارن
گوشههای متفاوت شکلهای UI رایج میسازند: chat bubble یک گوشهٔ صفر استفاده میکند (مثلاً `12 12 12 0`)؛ tab دو گوشهٔ صفر پایین استفاده میکند؛ pill button مقدار بزرگ روی left+right و 0 روی top+bottom میگیرد — یا سادهتر، یک مقدار بزرگ مساوی مثل `9999` تنظیم کنید.
Radius بیضوی
CSS از radius بیضوی per-corner با syntax `tl-x/tl-y` (مثل `12px/24px`) برای بیضی نامتقارن پشتیبانی میکند. این ابزار فقط گوشههای دایرهای (single-value) emit میکند — اگر بیضوی نیاز دارید با دست ویرایش کنید.