خمیده کردن گوشه‌ی المان‌ها (Border Radius) در CSS

در CSS3 امکانی افزوده شده است که با استفاده از آن میتوانید گوشه ی المان های خودتان را بصورت گرد شده و خمیده شده داشته باشید. این خاصیت Border Radius در CSS نام دارد. در این آموزش یاد میگیریم که چطور میتوانیم با استفاده از سی اس اس (CSS) گوشه‌ی المان ها را خمیده یا گرد کنیم.

Border Radius در CSS

اگر میخواهید با خاصیت Border Radius در CSS بصورت کامل آشنا شوید، پینشهاد میکنم حتما فایل آموزشی زیر را مشاهده کنید.

برای اینکه بتوانیم از Border Radius در CSS استفاده کنیم، نیاز هست که مرورگری داشته باشیم که از کدهای CSS3 پیشتیبانی کنند. اگر مرورگر شما یک مرورگر معروف و بروز باشد، از این قابلیت  کاملا پشتیبانی خواهد کرد.

Border Radius قابلیتی است که در آخرین نسخه CSS یعنی سی اس اس ۳ معرفی شده است و به شما کمک میکند که به راحتی گوشه المان هایتان را بصورت گرد شده داشته باشید.

برای استفاده از Border Radius در CSS کافی است که یک المان را در CSS انتخاب کنیم. برای مثال در تکه کد زیر، ما یک div با کلاس mydiv ساخته ایم و در CSS به آن طول و ارتفاع ۲۰۰ پیکسل و رنگ پس زمینه‌ی قرمز را داده‌ایم:

.mydiv{
    width:200px;
    height:200px;
    background-color: red;
}

الان میتوانیم از خصوصیت Border Radius در CSS استفاده کنیم. برای اینکار، تکه کد زیر را به کد CSS خود اضافه میکنیم:

border-radius: 10px

با استفاده از اضافه کردن این تکه کد به کدهای بالا، خروجی کار ما شبیه به تصویر زیر میشود:

همین کار را دقیقا با عکس ها هم میتوانید انجام دهید. برای مثال اگر بخواهید یک تصویر داشته باشید که گوشه‌هایش گرد و خمیده باشد، Border Radius در CSS به کمک شما خواهد آمد. برای اینکار دوباره یک عکس را انتخاب میکنیم، آنرا با اسفتاده از تگ img وارد صفحه‌ی وب خود میکنیم و کد زیر را برای آن مینویسیم:

img{
    border-radius:  20px; 
}

با استفاده از این تکه کد، عکسی که در صفحه‌ی وب‌مان وارد کرده بودیم، با اسفتاده از Border Radius در CSS ، گوشه‌هایش به اندازی ۲۰ پیکسل خمیده میشود و به شکل زیر در می‌آید:

تبدیل یک المان یا عکس به دایره با Border Radius در CSS

شما میتوانید عکس ها یا المان های خودتان را با استفاده از Border Radius در CSS به شکل دایره تبدیل کنید. برای اینکار کافی است که ۲ کار را انجام دهید:

1. مقدار width و height عکس یا المانی که میخواهید دایره شود را به یک میزان قرار دهید. مثلا هر دوی آ‌ن‌ها ۲۰۰ پیکسل باشد. تا عکس یا المان شما یک شکل مربع به خود بگیرد.
2. سپس مقدار Border radius آن‌را برابر مقدار %50 قرار دهید.

با استفاده از انجام این ۲ کار، المان یا عکس شما بصورت دایره‌ای شکل نمایش داده میشود:

در این مقاله درباره‌ی Border Radius در CSS صحبت کردیم. با استفاده از خصوصیت Border Radius در CSS میتوان کارهای خیلی جذاب و پیچیده‌ای نیز کرد که در مقالات آینده در یادیفای درباره‌ی آن‌ها صحبت خواهیم کرد.

مطالعه‌ی مقاله‌ی CSS3 چیست هم میتواند برایتان مفید باشد.

منبع: یادیفای