نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل
کادر (Boder)
border-style
با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیم کادر داشته باشیم یا نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجاد کنیم مشخص کنیم. در اینجا می توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید:

none
با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.

solid


This DIV have a solid border


dashed


This DIV have a dashed border


dotted


This DIV have a dotted border


double


This DIV have a double border


groove


This DIV have a groove border


hidden


This DIV have a hidden border


inset


This DIV have a inset border


outset


This DIV have a outset border


ridge


This DIV have a ridge border
همانطور که می بینید عرض این کادرها بیش از آن چیزی است که ما نیاز داریم چون ما برای این کادرها عرضی مشخص نکردیم. اگر بخواهیم عرض این کادرها به اندازه مشخصی باشد باید از پارامتر width که قبلاً با آن آشنا شدیم استفاده کنیم. به مثال زیر توجه کنید:

<div style="width:300px; border-style:solid">برای این کادر عرض 300 پیکسل تعیین شده است.</div>
نتیجه به این صورت خواهد بود:

برای این کادر عرض 300 پیکسل تعیین شده است.