خصوصیت animation-play-state

مثال

متوقف کردن انیمیشن:

animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari and Chrome */

پشتیبانی مرورگرها

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-play-state را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-play-state می توان اجرا یا توقف انیمشن را تعیین نمود.

توجه: با استفاده از این خصوصیت در JavaScript می توان اجرای انیمیشن را در طول یک سیکل، متوقف نمود.

مقدار پیشفرض	running
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.animationPlayState="paused"

نحوه استفاده

animation-play-state: paused|running;

مقدار	توضیحات	نمایش دادن
paused	انیمیشن را متوقف می کند.
running	انیمیشن را اجرا (run) می کند.

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

خصوصیت background

مثال

تنظیم کلیه خصوصیت های مربوط به پس زمینه، در یک مرحله:

body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

تعریف و کاربرد

از خصوصیت background می توانید برای مختصر نویسی خصوصیت های مربوط به پس زمینه استفاده نمایید.

خصوصیت هایی که می توایند تنظیم نمایید:

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض	see individual properties
ارث بری	خیر
نسخه	CSS1 + new properties in CSS3
JavaScript ساختار	object.style.background="red url(smiley.gif) top left no-repeat"

نحوه استفاده

background: color position size repeat origin clip attachment image;

مقدار	توضیحات	CSS
background-color	رنگ پس زمینه یک عنصر را تنظیم می کند.	1
background-position	شروع مکان قرارگیری عکس پس زمینه را تنظیم می کند.	1
background-size	اندازه تصویر پس زمینه را تنظیم می کند.	3
background-repeat	چگونگی تکرار عکس پس زمینه را تنظیم می کند.	1
background-origin	ناحیه قرار گیری عکس پس زمینه را مشخص می کند. (تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد)	3
background-clip	ناحیه رنگ آمیزی پس زمینه را مشخص می کند.	3
background-attachment	مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه
background-image	عکس های پس زمینه را تنظیم می کند.	1

بیاموزهای مرتبط

Styling Backgrounds (بیاموز CSS)

CSS3 Background (بیاموز CSS3)

خصوصیت background-attachment

مثال

چگونه عکس پس زمینه را ثابت کنیم:

body
{
background-image:url('w3css.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

تعریف و کاربرد

با استفاده از خصوصیت background-attachment می توانید تنظیم نمایید که، اگر صفحه Scroll داشت و به سمت پایین یا بالا حرکت کردیم آیا عکس پس زمینه در جای خود ثابت بماند یا خیر.

مقدار پیشفرض	scroll
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.backgroundAttachment="fixed"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-attachment را پشتیبانی می کنند.

مقدارهای خصوصیت

مقدار	توضیحات
scroll	عکس پس زمینه همراه با عنصر، scroll می شود. (مقدار پیشفرض)
fixed	عکس پس زمینه نسبت به محل نمایش، ثابت می شود.
local	عکس پس زمینه همراه با محتویات عنصر، scroll می شود.

خصوصیت background-color

مثال

تنظیم رنگ پس زمینه چند عنصر مختلف: (در انتهای این بیاموز، مثال های بیشتری را خواهید دید)

body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}

تعریف و کاربرد

با استفاده از خصوصیت background-color می توانید رنگ پس زمینه یک عنصر را تنظیم نمایید.

پس زمینه یک عنصر، شامل padding و border نیز می شود. (اما margin جزو آن نیست)

مقدار پیشفرض	transparent
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.backgroundColor="#00FF00"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-color را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

نکته ها و ترفندها

توجه: زمانی که از عکس یا رنگ پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
color	برای مشاهده لیست رنگ ها، به لینک HTML Colors مراجعه نمایید.
transparent	تعیین می کند که رنگ پس زمینه باید ناپیدا (transparent) باشد. transparent مقدار پیشفرض است.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

مثال - خودتان امتحان کنید

تنظیم background-color قسمتی از یک متن
این مثال، نشان می دهد که چگونه رنگ پس زمینه قسمتی از یک متن را تنظیم نماییم.

خصوصیت background-image

مثال

تنظیم عکس پس زمینه، برای عنصر <body>:

body
{
background-image:url('paper.gif');
background-color:#cccccc;
}

تعریف و کاربرد

با استفاده از خصوصیت background-image، می توانید برای یک عنصر، یک یا چند عکس پس زمینه تنظیم نمایید.

پس زمینه یک عنصر، شامل content و border و padding است. (margin شامل پس زمینه نمی شود)

بصورت پیشفرض، عکس پس زمینه در گوشه بالا سمت چپ قرار می گیرد و همچنین در دو جهت عمودی و افقی تکرار می شود.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.backgroundImage="url(stars.gif)"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-image را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

نکته ها و ترفندها

نکته: بدلیل اینکه ممکن است عکس پس زمینه، قابل دسترس نباشد، همیشه یک background-color تنظیم نمایید.

مقدارهای خصوصیت

مقدار	توضیحات
url('URL')	URL عکس پس زمینه، برای تنظیم بیشتر از یک عکس، URLها را با کاما از هم جدا نمایید.
none	هیچ عکسی بعنوان پس زمینه نمایش داده نمی شود. (مقدار پیشفرض)
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باش

خصوصیت background-position

مثال

چگونگی مکان دهی عکس پس زمینه:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

تعریف و کاربرد

با استفاده از خصوصیت background-position، می توانید مکان شروع قرارگیری عکس پس زمینه را مشخص نمایید.

توجه: برای اینکه این خصوصیت در مرورگرهای Firefox و Opera کار کند، باید خصوصیت background-attachment را با مقدار "fixed" تنظیم نمایید.

مقدار پیشفرض	0% 0%
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.backgroundPosition="center"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-position را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
left top left center left bottom right top right center right bottom center top center center center bottom	اگر تنها یک keyword را مشخص نماید، قسمت دوم با مقدار "center" تنظیم خواهد شد.
x% y%	مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، 0% 0% است و گوشه پایین سمت راست 100% 100% است. اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار "50%" تنظیم خواهد شد. (مقدار پیشفرض 0% 0%)
xpos ypos	مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، 0 0 است. واحد اعداد می تواند پیکسل یا هر واحد دیگری در CSS باشد (CSS Units). اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار "50%" تنظیم خواهد شد.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

مثال - خودتان امتحان کنید

مکان دهی عکس پس زمینه
این مثال نشان می دهد که چگونه عکس پس زمینه را در صفحه مکان دهی نماییم.

مکان دهی عکس پس زمینه با استفاده از درصد
این مثال نشان می دهد که چگونه با استفاده از واحد درصد، عکس پس زمینه را مکان دهی نماییم.

مکان دهی عکس پس زمینه با استفاده از پیکسل
این مثال نشان می دهد که چگونه با استفاده از واحد پیکسل، عکس پس زمینه را مکان دهی نماییم.

خصوصیت background-repeat

مثال

تکرار عکس پس زمینه به صورت افقی:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

تعریف و کاربرد

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

بصورت پیشفرض، عکس پس زمینه در هر دو جهت افقی و عمودی تکرار می شود.

مقدار پیشفرض	repeat
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.backgroundRepeat="repeat-y"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-repeat را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

نکته ها و ترفندها

نکته: عکس پس زمینه طبق مقداری که برای خصوصیت background-position تنظیم نموده اید مکان دهی می شود. اگر مقداری برای این خصوصیت تنظیم ننمایید، عکس همیشه در گوشه بالا سمت چپ قرار می گیرد.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
repeat	عکس پس زمینه در هر دو جهت تکرار می شود. (مقدار پیشفرض)
repeat-x	عکس پس زمینه در جهت افقی تکرار می شود.
repeat-y	عکس پس زمینه در جهت عمودی تکرار می شود.
no-repeat	عکس پس زمینه تکرار نمی شود.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

مثال - خودتان امتحان کنید

تکرار عکس پس زمینه بصورت افقی و عمودی
این مثال نحوه ی تکرار عکس پس زمینه را در هر دو جهت افقی و عمودی نشان می دهد.

تکرار عکس پس زمینه بصورت افقی
این مثال نحوه ی تکرار عکس پس زمینه را در جهت افقی نشان می دهد.

نمایش عکس پس زمینه فقط یکبار
این مثال نحوه ی جلوگیری از تکرار عکس پس زمینه را نشان می دهد.

خصوصیت background-clip

مثال

مشخص کردن ناحیه رنگ آمیزی پس زمینه:

div
{
background-color:yellow;
background-clip:content-box;
}

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-clip را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت background-clip را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت background-clip، می توانید ناحیه رنگ آمیزی پس زمینه را مشخص نمایید.

مقدار پیشفرض	border-box
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.backgroundClip="content-box"

نحوه استفاده

background-clip: border-box|padding-box|content-box;

مقدار	توضیحات	نمایش دادن
border-box	محل رنگ آمیزی پس زمینه در قسمت border خواهد بود.
padding-box	محل رنگ آمیزی پس زمینه در قسمت padding خواهد بود.
content-box	محل رنگ آمیزی پس زمینه در قسمت content خواهد بود.

خصوصیت background-origin

مثال

عکس پس زمینه نسبت به content مکان دهی شده است:

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-origin را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت background-origin را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت background-origin، می توانید عکس پس زمینه را نسبت به یکی از مکان های content یا padding و یا border مکان دهی نمایید.

توجه: اگر خصوصیت background-attachment با مقدار "fixed" تنظیم شده باشد، این خصوصیت اثری نخواهد داشت.

مقدار پیشفرض	padding-box
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.backgroundOrigin="content-box"

نحوه استفاده

background-origin: padding-box|border-box|content-box;

مقدار	توضیحات	نمایش دادن
padding-box	عکس پس زمینه نسبت به padding مکان دهی می شود.
border-box	عکس پس زمینه نسبت به border مکان دهی می شود.
content-box	عکس پس زمینه نسبت به content مکان دهی می شود.

خصوصیت background-size

مثال

مشخص کردن اندازه عکس پس زمینه:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background-size را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت background-size را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت background-size می توانید اندازه تصویر پس زمینه را مشخص نمایید.

مقدار پیشفرض	auto
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.backgroundSize="60px 80px"

نحوه استفاده

background-size: length|percentage|cover|contain;

مقدار	توضیحات	نمایش دادن
length	width و height عکس پس زمینه را تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود.
percentage	width و height عکس پس زمینه را بصورت درصدی از عنصر والدش تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود.
cover	اندازه عکس پس زمینه به قدری بزرگ می شود که تمام ناحیه content را بپوشاند. ممکن است مقداری از عکس پس زمینه داخل ناحیه content قرار نگیرد و قابل رویت نباشد.
contain	اندازه عکس پس زمینه به قدری بزرگ می شود که در ناحیه content جا شود و در ضمن تمام آن قابل رویت باشد.

خصوصیت border

مثال

تنظیم style چهار لبه عنصر :

p
{
border:5px solid red;
}

تعریف و کاربرد

با استفاده از خصوصیت border، می توانید در یک مرحله، style چهار لبه اطراف عنصر را مشخص نمایید.

خصوصیت هایی که می توانید تنظیم نمایید بترتیب برابر است با:

border-width
border-style
border-color

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض	مشخص نشده
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.border="3px solid blue"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات
border-width	width لبه ها را مشخص می کند.
border-style	style لبه ها رامشخص می کند.
border-color	color لبه ها را مشخص می کند.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت border-bottom

مثال

تنظیم style لبه ی پایینی عنصر :

p
{
border-style:solid;
border-bottom:thick dotted #ff0000;
}

تعریف و کاربرد

با استفاده از خصوصیت border-bottom، می توانید در یک مرحله تمام خصوصیت های لبه پایینی را تنظیم نمایید.

خصوصیت هایی که می توانید تنظیم نمایید بترتیب برابر است با:

border-bottom-width
border-bottom-style
border-bottom-color

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض	مشخص نشده
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.borderBottom="3px solid blue"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت background را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات
border-bottom-width	width لبه پایینی را مشخص می کند.
border-bottom-style	style لبه پایینی را مشخص می کند.
border-bottom-color	color لبه پایینی را مشخص می کند.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت border-bottom-color

مثال

تنظیم رنگ لبه ی پایینی عنصر :

p
{
border-style:solid;
border-bottom-color:#ff0000;
}

تعریف و کاربرد

با استفاده از خصوصیت border-bottom-color، می توانید رنگ لبه پایینی عناصر را تنظیم نمایید.

توجه: قبل از اینکه خصوصیت border-bottom-color را تنظیم نماید خصوصیت border-style را مقدار دهی کنید. یک عنصر باید لبه داشته باشد تا بتوان رنگ آنرا مشخص نمود.

مقدار پیشفرض	مشخص نشده
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.borderBottomColor="blue"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border-bottom-color را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 6 و نسخه های قبلی آن،، مقدار "transparent" را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
color	لطفاً جهت مشاهده رنگ های قابل استفاده به لینک روبرو مراجعه نمایید: HTML Colors
transparent	مشخص می کند که رنگ لبه ها باید ناپیدا باشد. (مقدار پیشفرض)
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت border-bottom-color

مثال

تنظیم رنگ لبه ی پایینی عنصر :

p
{
border-style:solid;
border-bottom-color:#ff0000;
}

تعریف و کاربرد

با استفاده از خصوصیت border-bottom-color، می توانید رنگ لبه پایینی عناصر را تنظیم نمایید.

توجه: قبل از اینکه خصوصیت border-bottom-color را تنظیم نماید خصوصیت border-style را مقدار دهی کنید. یک عنصر باید لبه داشته باشد تا بتوان رنگ آنرا مشخص نمود.

مقدار پیشفرض	مشخص نشده
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.borderBottomColor="blue"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border-bottom-color را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 6 و نسخه های قبلی آن،، مقدار "transparent" را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
color	لطفاً جهت مشاهده رنگ های قابل استفاده به لینک روبرو مراجعه نمایید: HTML Colors
transparent	مشخص می کند که رنگ لبه ها باید ناپیدا باشد. (مقدار پیشفرض)
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت border-bottom-style

مثال

تنظیم style لبه پایین عنصر :

p
{
border-style:solid;
border-bottom-style:dotted;
}

تعریف و کاربرد

با استفاده از خصوصیت border-bottom-style، می توانید style لبه پایین یک عنصر را تنظیم نمایید.

مقدار پیشفرض	مشخص نشده
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.borderBottomStyle="dotted"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border-bottom-style را پشتیبانی می کنند.

توجه: هیچ کدام از نسخه های Internet Explorer (بانضمام IE8)، مقدار "inherit" و "hidden" را پشتیبانی نمی کنند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
none	border مشخص نمی شود.
hidden	بجز عنصر table در resolutionهای مختلف شبیه "none" است.
dotted	لبه ها به صورت نقطه نقطه ای نمایش داده می شود.
dashed	لبه ها به صورت خط تیره نمایش داده می شود.
solid	لبه ها به صورت خالص و یکپارچه نمایش داده می شود.
double	دو لبه نمایش داده می شود.
groove	یک لبه سه بعدی گود دار (groove) نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد.
ridge	یک لبه سه بعدی برجسته (ridge) نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد.
inset	یک لبه سه بعدی inset نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد.
outset	یک لبه سه بعدی outset نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.