آموزش border-style در CSS | آموزش کامل + نمونه کد

قبلی بعدی

ویژگی 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 و...

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی