ویژگی border-radius در CSS

ویژگی border-radius، برای انحنا دادن به حاشیه (border) استفاده می شود.

ویژگی border-radius، مقدار عددی دریافت می کند.

border-radius: 15px;
border-radius: 5px;

جهت های border-radius در CSS

border-radius: 10px;

ویژگی border، در نمونه کد بالا، خلاصه ی چهار ویژگی است.

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

خلاصه نویسی border-radius با یک مقدار در CSS

ویژگی border-radius را می توان به چند صورت خلاصه نویسی کرد.

ویژگی border-radius با یک مقدار:

border-radius: 5px;
  • در چهار گوشه به صورت یکسان اعمال می شود.

خلاصه نویسی border-radius با دو مقدار در CSS

ویژگی border-radius با دو مقدار:

border-radius: (top-left/bottom-right) (top-right/bottom-left);
  • مقدار اول در گوشه بالا-چپ و پایین-راست
  • مقدار دوم در گوشه بالا-راست و پایین-چپ
border-radius: 10px 30px;

خلاصه نویسی border-radius با سه مقدار در CSS

ویژگی border-radius با سه مقدار:

border-radius: top-left (top-right/bottom-left) bottom-right;
  • مقدار اول در گوشه بالا-چپ
  • مقدار دوم در گوشه بالا-راست و پایین-چپ
  • مقدار سوم در گوشه پایین-راست
border-radius: 10px 20px 30px;

خلاصه نویسی border-radius با چهار مقدار در CSS

ویژگی border-radius با چهار مقدار:

border-radius: top-left top-right bottom-right bottom-left;
  • مقدار اول در گوشه بالا-چپ
  • مقدار دوم در گوشه بالا-راست
  • مقدار سوم در گوشه پایین-راست
  • مقدار چهارم در گوشه پایین-چپ
border-radius: 5px 10px 15px 20px;

خلاصه درس

در این درس با ویژگی border-radius در CSS:

  • انواع مقداردهی
  • خلاصه نویسی آن با مقدارهای مختلف

آشنا شدیم.

توسعه دهندگان
احسان اسلامی