border در css

در طراحی و فرم بندی ظاهر صفحات وب، از خصوصیات زیادی در css استفاده می شود که هر کدام می توانند قابلیتی ویژه را برایمان ایجاد نمایند تا به کمک آن قابلیت، به هدف مورد انتظار خود دست یابیم، یکی از این ویژگی ها، قابلیت ایجاد انواع خطوط به شکل ها و طرح های مختلف در وب با استفاده از ویژگی های border و outline در css است.

ایجاد خط با ویژگی border در css

با استفاده از ویژگی border در css می توان به راحتی انواع مختلف خطوط را برای لایه ها و عناصر صفحات وب تعریف و تنظیم کرد، برای انجام این کار، ویژگی border معمولا از تنظیمات و مقادیر زیرمجموعه خود استفاده می کند که به طور دقیق، رنگ، اندازه خطوط، نوع و… را مشخص می کنند،
به مثال زیر که یک کلاس در css است توجه کنید.

توضیحات:
در کلاس ساده بالا، به راحتی یک خط به صورت solid یا جامد (خطوط معمولی) با کد رنگی ۹۹۹# و اندازه ۱ پیکسل ایجاد کرده ایم، به این صورت کلاس بالا به طور پیش فرض این خط را در هر چهار طرف (بالا، پائین، چپ و راست) لایه یا عنصر در صفحات وب ترسیم خواهد کرد، برای ترسیم خطوط در css، نوع یا همان style آنها باید الزاما تعیین شود (به فرض solid، dotted و…)
اما تنظیم سایر موراد اختیاری است، برای ترسیم خطوط متفاوت نیز، می توان از مقادیر زیر برای style در border استفاده کرد:
* dashed: برای ترسیم خطوط با فاصله (علامت dash یا -).
* dotted: برای ترسیم خطوط با فاصله (علامت نقطه یا dot).
* double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
* groove: برای ترسیم خطوط به شکل شیاری و برجسته.
* hidden: برای ترسیم خطوط پنهان در صفحه.
* inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
* outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
* none: هیچ خطی ترسیم نمی شود.
* ridge: برای ترسیم خطوط شیاری و برجسته.
* solid: برای ترسیم خطوط معمولی.

برای مقادیر اندازه عرض خطوط نیز می توان از مقادیر پیکسل، درصد و… استفاده کرد، علاوه بر این از سه مقدار زیر هم می توان برای این مقصود استفاده نمود:
* medium: ایجاد خطوط با اندازه استاندارد و پیش فرض مرورگر.
* thin: ایجاد خطوط نازک و ظریف.
* thick: ایجاد خطوط ضخیم و برجسته.

برای مقادیر رنگ نیز می توانید از کدهای هگز (مانند ۰۰۰۰FF#) یا rgb (مانند (۲۵۵,۱۰۰,۱۲۵)rgb)
و همچنین عنوان های رنگی (مانند red ،blue، green و…) استفاده کنید.
به مثال زیر توجه کنید.

و همچنین

شیوه های نگارش (syntax) خاصیت border در css

شیوه تعریف و نگارش (syntax) خاصیت border در css به حالتی که در بالا از آن استفاده کرده ایم محدود نمی شود، در واقع حالت فوق نوع کاربرد مختصر نویسی این خاصیت است،اگر بخواهید از border به شکل سفارشی تری استفاده نمائیم،
به فرض برای هر ضلع یک لایه در صفحه، یک نوع خاص از خط و با اندازه و رنگ متفاوت داشته باشیم، می توانیم از سایر پارامترهای این خاصیت به شکل زیر استفاده نمائیم.

- تعریف خطوط برای یک ضلع خاص:

بدین منظور از border-right، border-left، border-top و border-bottom استفاده می کنیم، به عنوان مثال:

کلاس فرضی بالا، برای لایه ای که از این کلاس برای آن استفاده می شود، سه خط به صورت solid در سمت بالا، چپ و راست ترسیم خواهد کرد و در پائین لایه، از ویژگی border-bottom پیروی کرده و خط را به صورت double ایجاد می کند.
مثالی دیگر:

اگر آی دی بالا را در یک صفحه html به یک بلاک نسبت دهید، خواهید دید که اضلاع مختلف بلاک، با خطوط متفاوت (از لحاظ نوع، رنگ و اندازه) تنظیم شده است؛

علاوه بر این، سه پارامتر color، style و width را می توان به صورت جداگانه نیز برای خطوط در css تعریف کرد، البته این روش همیشه هم ضروری نیست و با شیوه مختصر نویسی نیز می توان به راحتی خطوط مختلف را ترسیم کرد، اما در مواقعی ممکن است استفاده از این سبک کاربرد داشته باشد؛
بدین منظور از سه خاصیت ذکر شده به صورت زیر استفاده می شود:
* border-width (یا به شیوه ترکیبی به صورت به فرض border-bottom-width): برای تعیین عرض خطوط.
* border-color (یا به شیوه ترکیبی به صورت به فرض border-top-color): برای تعیین رنگ خطوط.
* border-style (یا به شیوه ترکیبی به صورت به فرض border-left-style): برای تعیین نوع خطوط.
به مثال زیر توجه کنید.

همچنین مثالی دیگر:

و :

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