نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل

border-style

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

1. none
   با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.
    
2. solid
    
   
   This DIV have a solid border
   
   
3. dashed
    
   
   This DIV have a dashed border
   
   
4. dotted
    
   
   This DIV have a dotted border
   
   
5. double
    
   
   This DIV have a double border
   
   
6. groove
    
   
   This DIV have a groove border
   
   
7. hidden
    
   
   This DIV have a hidden border
   
   
8. inset
    
   
   This DIV have a inset border
   
   
9. outset
    
   
   This DIV have a outset border
   
   
10. ridge
     
    
    This DIV have a ridge border

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

نتیجه به این صورت خواهد بود: