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

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

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

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

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

.squircle {
   width: 100px;
   height: 100px;
   background-color: #0088FF;
   border-radius: 10px;
}

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

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

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

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