خمیده کردن گوشه‌ی المان‌ها با CSS

خمیده کردن گوشه‌ی المان‌ها با CSS

شاید گاهی برای شما هم پیش آمده باشد که المانی در صفحه‌ی وب داشته باشید و بخواهید گوشه‌های آن‌را گرد کنید و به آن ظاهر چشم نوازتری ببخشید. برای اینکار باید از CSS استفاده کنید. آموزش ویدئویی زیر روش اینکار را به شما توضیح داده است :

dl-btnدانلود ویدئوی آموزشی با کیفیت بالا و کاملا واضح (با حجم ۱2 مگ)dl-btn

border radius چیست؟

حتما دیده‌اید که بعضی المان‌ها در سایت‌ها مانند تصاویر، جعبه‌ها و… دارای گوشه‌هایی گرد و خمیده‌ میباشد.

قبل از بوجود آمدن نسخه‌ی جدید css یعنی همان css3 اینکار با نرم‌افزارهایی مانند فتوشاپ و… انجام میشد. اما الان در css3 این امکان وجود دارد که با یک خط کد ساده گوشه‌ی المان‌ها را به اندازه دلخواه گرد و خمیده کنیم.

border radius در css

برای گرد کردن گوشه‌ی المان ها با استفاده از CSS فقط کافی است که در استایل دهی CSS مربوط به آن المان از دستور border-redius به این شکل استفاده کنیم :

.element{
     border-radius:5px;
}

مقداری که روبروی border-radius وارد می‌شود میتواند به هر واحدی باشد ولی در دنیای وب واحد پیکسل (px) رایج است و هرچه مقدار این عدد بیشتر باشد گوشه‌های المان ما بیشتر خمیده خواهد شد.