آموزش کادر یا border در CSS

ویژگی های border به ما امکان می دهد تا استایل(style)، عرض(width) و رنگِ(color) کادر یک عنصر را مشخص کنیم.

استایل border در CSS

ویژگی border-style مشخص می کند که چه نوع کادری نمایش داده شود. برای این ویژگی، مقادیر زیر را می توانیم به کار ببریم:

1. dotted : یک کادر نقطه نقطه ای را مشخص می کند.
2. dashed : یک کادر خط فاصله ای را مشخص می کند.
3. solid : یک کادر که دور آن یک خط بسته(solid) است را مشخص می کند.
4. double : یک کادر که دور آن دو خط بسته قرار دارد را مشخص می کند.
5. groove : یک کادر شیار دار سه بعدی را مشخص می کند. نتیجه به مقدار border-color بستگی دارد. 
6. ridge : یک کادر سه بعدی برآمده را مشخص می کند. نتیجه به مقدار border-color بستگی دارد. 
7. inset : یک کادر سه بعدی درونی را مشخص می کند. نتیجه به مقدار border-color بستگی دارد. 
8. outset : یک کادر سه بعدی بیرونی را مشخص می کند. نتیجه به مقدار border-color بستگی دارد. 
9. none : هیچ کادری را مشخص نمی کند.
10. hidden : یک کادر مخفی را مشخص می کند.

ویژگی border-style می تواند یک تا چهار مقدار داشته باشد(برای کادر بالایی، کادر سمت راست، کادر پایین و کادر سمت چپ).

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

نکته: هیچ یک از دیگر ویژگی های border، هیچ تاثیری ندارند(که بعدا در مورد آنها توضیح می دهیم)، مگر اینکه ویژگی  border-style تنظیم شود.