سبد (0)

خصوصیت border-style

مثال (خصوصیت 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"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

مثالs

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

تنظیم چهار لبه مختلف
چگونه برای چهار لبه یک عنصر borderهای مختلف تنظیم نماییم.


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

CSS Border (بیاموز CSS)

HTML DOM reference: borderStyle property

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