ویژگی border-style در CSS

ویژگی border-style، می تواند استایل حاشیه (border) را مشخص کند.

ویژگی border-style مقادیر مختلفی می پذیرد.

مقادیر توضیحات
dotted یک حاشیه را به صورت نقطه چین تعریف می کند.
dashed یک حاشیه را به صورت خط چین تعریف می کند.
solid یک حاشیه ساده را می سازد.
double یک حاشیه دوتایی را تعریف می کند.
groove یک حاشیه شیار دار و سه بعدی را تعریف می کند.
ridge یک حاشیه ردیفی سه بعدی را می سازد.
inset یک حاشیه داخلی سه بعدی را تعریف می کند.
outset یک حاشیه خارجی سه بعدی را تعریف می کند.
hidden یک حاشیه پنهان را تعریف می کند.
none حاشیه را از بین می برد.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: none;

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

border-style: solid;

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

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

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

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

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

border-style: solid;
  • در چهار جهت به صورت یکسان اعمال می شود.

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

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

border-style: y x;
  • مقدار اول در جهت بالا و پایین (محور y)
  • مقدار دوم در جهت راست و چپ (محور x)
border-style: solid dotted;

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

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

border-style: top x bottom;
  • مقدار اول در جهت بالا
  • مقدار دوم در جهت راست و چپ (محور x)
  • مقدار سوم در جهت پایین
border-style: solid dotted dashed;

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

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

border-style: top right bottom left;
  • مقدار اول در جهت بالا
  • مقدار دوم در جهت راست
  • مقدار سوم در جهت پایین
  • مقدار چهارم در جهت چپ
border-style: solid dotted dashed double;

خلاصه درس

در این درس با ویژگی border-style در CSS و مقادیر آن:

  • مقدار dotted
  • مقدار dashed
  • مقدار solid
  • مقدار double و...

آشنا شدیم.

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