آشنایی با خاصیت border-radius در CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-22 15:05:43

خاصیت border-radius در CSS و استایل جهت گردکردن و دایره ای کردن گوشه های یک المنت استفاده می شود. المنت های طراحی سایت به طور پیش فرض حالت خشک و زاویه 90 درجه دارند که در بعضی از سبک های طراحی مانند متریال و یا فلت، برای کلیدها، بخش ها و عناصر سایت از حالت های دایره ای استفاده می کنند. حتی کلیدهایی که به صورت دایره هستند را نیز می توان با این خاصیت ایجاد کرد.

به طور خام و پیش فرض این دستور به این صورت است:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

در این خاصیت ما می توانیم از اعداد با واحدهای اندازه گیری معین استفاده کنیم. مثال:

// واحد اندازه گیری پیکسل
#example2 {
  border-radius: 10px;
}

// واحد اندازه گیری pt
#example2 {
  border-radius: 10pt;
}

 

می توانیم به صورت درصدی مقدار را وارد کنیم. میزان گردکردن و دایره ای شدن گوشه ها در این حالت نرم تر و بهتر انجام خواهد شد.

// اعداد کوچک به صورت درصد
#example2 {
  border-radius: 2%;
}

// تبدیل المنت به یک دایره کامل
#example2 {
  border-radius: 100%;
}

 

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

#example2 {
  border-radius-right-top: 10px;
}

 

می توانیم برای هر گوشه یک عدد خاص در نظر بگیریم:

#example2 {
  border-radius: 10px 5px 10px 15px;
}

در کد بالا از سمت چپ به راست اعداد وارد شده به ترتیب زیر است:

  1. عدد اول، گوشه بالا، چپ
  2. عدد دوم، گوشه بالا، راست
  3. عدد سوم، گوشه پایین، سمت راست
  4. عدد چهارم، گوشه پایین، چپ