سبد (0)

آموزش‌های پیشنهادی فرادرس

متفرقه CSS-گرد کردن گوشه ها

گرد کردن گوشه ها در CSS

برای گرد کردن گوشه ها فقط کافیست یک مربع یا مستطیل ایجاد کنید و همان کار هایی که برای دایره یا بیضی انجام شد را انجام دهید. ولی تفاوت آن اینبار در این است که به border-radius مقدار درصد نمی دهیم و مقدار ثابت است و کمتر از نصف طول، که بستگی به نیاز شما دارد.

دلیل اینکه درصد نمی دهیم بخاطر مستطیل است، در واقع چون طول و عرض با هم متفاوت هستند حالت گرد به خود نمی گیرد (نسبت طول به عرض برای گرد کردن) ولی برای مربع می توان از درصد استفاده کرد.

در مثال زیر فقط مربع می باشد که کافیست یکی از مقادیر را کمتر یا بیشتر از دیگری کنید تا مستطیل نیز شکل بگیرد:

گرد کردن گوشه ها در CSS

.squircle {
width: 100px;
height: 100px;
background-color: #0088FF;
border-radius: 10px;
}
خودتان امتحان کنید »

بیاموزها مرتبط

CSS height/width (آموزش CSS)

border-radius (مرجع خصوصیت های CSS)

background-color (مرجع خصوصیت های CSS)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان