با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیمکادر داشته باشیم یا نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجادکنیم مشخص کنیم. در اینجا می توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید:
none
با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.
solid
dashed
dotted
double
groove
hidden
inset
outset
ridge
این مقادیر را امتحان کنید تا متوجه نتیجه آنها شوید …
ما باید همیشه عرض کادر هم مشخص کنیم
مثال از روش استفاده :

کد:
<div style=”width:۳۰۰px;  border-style:solid”>
 

برای این کادر عرض ۳۰۰ پیکسل تعیین شده  است
 
.</div>


border-width
این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد:
مقدار عددی بر حسب پیکسل
در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید:
کد:

کد:
<div style=”border-style:solid;  border-width:۱۰px”>
 

این کادر ۱۰ پیکسل ضخامت  دارد
 
</div>


thin
این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر:
کد:

کد:
<div style=”border-style:solid;  border-width:thin”>
 

ضخامت این کادر thin  در نظر گرفته شده  است
 
.</div>


thick
این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:
کد:

کد:
<div style=”border-style:solid;  border-width:thick”>
 

ضخامت این کادر thick  در نظر گرفته شده  است
 

.</div>
border-color
شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای اینکار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامترمی توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفادهکنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری کهبرای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبتبه نام رنگها انعطاف پذیری بیشتری دارد.
برای بدست آوردن کد رنگ ها میتوانید از یک نرم افزار گرافیکی مثل فتوشاپ استفاده نمایید . همچنین میتوانید از جدول موجود در آدرس http://www.w۳schools.com/tags/ref_colornames.asp استفاده نمایید و کد رنگ مورد نظر و یا نام رنگ را انتخاب نمایید.

به یک نمونه برای تغییر رنگ کادر توجه کنید:
استفاده از نام رنگها:
کد:

کد:
<div style=”border-style:solid;  border-color:green”>
 

این کادر به رنگ سبز خواهد بود
 
.</div>


استفاده از معادل هگزا دسیمال رنگها:
کد:

کد:
<div style=”border-style:solid;  border-color:#۰۰۸۰۰۰″>
 

این کادر به رنگ سبز خواهد بود
 
.</div>