راسخون

مرجع CSS

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-bottom-width

مثال

تنظیم width لبه پایینی عنصر <p>:

p 
{
border-style:solid;
border-bottom-width:15px;
}

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

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

توجه: اگر خاصیت border-style تنظیم نشده باشد خاصیت border-bottom-width کار نخواهد کرد.

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

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

    

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

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

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

مقدار توضیحات نمایش دادن
thin یک لبه نازک (thin) تعریف می کند.
medium یک لبه متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک لبه ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت لبه را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-color

مثال

تنظیم رنگ چهار لبه عنصر <P>:

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

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

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

مثال:

  1. border-style:red green blue pink;
    • red لبه بالا
    • green لبه راست
    • blue لبه پایین
    • pink لبه چپ
  2. border-style:red green blue;
    • red لبه بالا
    • green لبه راست و چپ
    • blue لبه پایین
  3. border-style:red green;
    • red لبه بالا و پایین
    • green لبه راست و چپ
  4. border-style:red;
    • red تمام چهار لبه

توجه: اگر خاصیت border-style تنظیم نشده باشد خاصیت border-color کار نخواهد کرد.

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

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

    

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

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-color

مثال

تنظیم رنگ چهار لبه عنصر <P>:

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

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

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

مثال:

  1. border-style:red green blue pink;
    • red لبه بالا
    • green لبه راست
    • blue لبه پایین
    • pink لبه چپ
  2. border-style:red green blue;
    • red لبه بالا
    • green لبه راست و چپ
    • blue لبه پایین
  3. border-style:red green;
    • red لبه بالا و پایین
    • green لبه راست و چپ
  4. border-style:red;
    • red تمام چهار لبه

توجه: اگر خاصیت border-style تنظیم نشده باشد خاصیت border-color کار نخواهد کرد.

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

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

    

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

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-left

مثال

تنظیم style لبه سمت چپ عنصر <p>:

p 
{
border-style:solid;
border-left:thick double #ff0000;
}

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

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

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

  1. border-left-width
  2. border-left-style
  3. border-left-color

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

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

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

    

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-left-color

مثال

تنظیم رنگ لبه ی چپ عنصر <P>:

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

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

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

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

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

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

    

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

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-left-style

مثال

تنظیم style لبه چپ عنصر <p>:

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

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

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

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

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

    

تمام مرورگرهای اصلی، خصوصیت border-left-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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-left-style

مثال

تنظیم style لبه چپ عنصر <p>:

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

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

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

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

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

    

تمام مرورگرهای اصلی، خصوصیت border-left-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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-left-width

مثال

تنظیم width لبه سمت چپ عنصر <p>:

p 
{
border-style:solid;
border-left-width:15px;
}

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

با استفاده از خصوصیت border-left-width، می توانید عرض لبه سمت چپ یک عنصر را تعیین نمایید.

توجه: اگر خاصیت border-style تنظیم نشده باشد خاصیت border-left-width کار نخواهد کرد

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

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

    

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

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

 

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

مقدار توضیحات نمایش دادن
thin یک لبه نازک (thin) تعریف می کند.
medium یک لبه متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک لبه ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت لبه را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-right

مثال

تنظیم style لبه ی سمت راست عنصر <p>:

p 
{
border-style:solid;
border-right:thick double #ff0000;
}

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

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

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

  1. border-right-width
  2. border-right-style
  3. border-right-color

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

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

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

    

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-right-color

مثال

تنظیم رنگ لبه ی سمت راست عنصر <P>:

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

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

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

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

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

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

    

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

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-right-color

مثال

تنظیم رنگ لبه ی سمت راست عنصر <P>:

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

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

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

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

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

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

    

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

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

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

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

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

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-right-style

مثال

تنظیم style لبه سمت راست عنصر <p>:

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

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

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

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

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

    

تمام مرورگرهای اصلی، خصوصیت border-right-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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-right-width

مثال

تنظیم width لبه سمت راست عنصر <p>:

p 
{
border-style:solid;
border-right-width:15px;
}

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

با استفاده از خصوصیت border-right-width، می توانید عرض لبه سمت راست یک عنصر را تعیین نمایید.

توجه: اگر خاصیت border-style تنظیم نشده باشد خاصیت border-right-width کار نخواهد کرد

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

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

    

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

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

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

مقدار توضیحات نمایش دادن
thin یک لبه نازک (thin) تعریف می کند.
medium یک لبه متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک لبه ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت لبه را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-style

مثال

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

p
{
border-style:solid;
}
خودتان امتحان کنید »

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

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

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

مثال:

  1. border-style:dotted solid double dashed;
    • dotted لبه بالا
    • solid لبه راست
    • double لبه پایین
    • dashed لبه چپ
  2. border-style:dotted solid double;
    • dotted لبه بالا
    • solid لبه راست و چپ
    • double لبه پایین
  3. border-style:dotted solid;
    • dotted لبه بالا و پایین
    • solid لبه راست و چپ
  4. border-style:dotted;
    • dotted تمام چهار لبه
مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderStyle="dotted double"

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

    

تمام مرورگرهای اصلی، خصوصیت border-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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 
parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-style

مثال

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

p
{
border-style:solid;
}
خودتان امتحان کنید »

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

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

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

مثال:

  1. border-style:dotted solid double dashed;
    • dotted لبه بالا
    • solid لبه راست
    • double لبه پایین
    • dashed لبه چپ
  2. border-style:dotted solid double;
    • dotted لبه بالا
    • solid لبه راست و چپ
    • double لبه پایین
  3. border-style:dotted solid;
    • dotted لبه بالا و پایین
    • solid لبه راست و چپ
  4. border-style:dotted;
    • dotted تمام چهار لبه
مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderStyle="dotted double"

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

    

تمام مرورگرهای اصلی، خصوصیت border-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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.