لبه

یک عنصر زمانی جلب توجه خواهد کرد که از دیگر عناصر صفحه متفاوت باشد. با اضافه کردن لبه‌های رنگین به عناصر، آن‌ها را مرکز توجه قرار دهید.

انواع

لبه‌های نازک

برای داشتن لبه‌های نازک از کلاس joqd thin-border و سپس پسوند -border بعد از رنگ لبه استفاده کنید.

با لبه‌های نازک، border-width: 1px خواهد بود.

  • برای آشنایی بیشتر با رنگ‌ها به رنگ نگاه کنید.

این قسمت لبه‌های قرمز نازکی دارد.

<div class="joqd red-lighten-4 thin-border red-darken-3-border soft-corner elevate-2 demo-panel">
	<p>.این قسمت لبه‌های قرمز نازکی دارد</p>
</div>
لبه‌های پهن

برای داشتن لبه‌های پهن joqd thick-border و سپس پسوند -border بعد از رنگ لبه استفاده کنید.

این قسمت لبه‌های بنفش عمیق پهنی دارد.

<div class="joqd deep-purple-lighten-4 thick-border deep-purple-darken-3-border soft-corner elevate-2 demo-panel">
	<p>.این قسمت لبه‌های بنفش عمیق پهنی دارد</p>
</div>
بدون لبه

برای حذف کردن هر گونه لبه‌ای، از کلاس joqd no-border استفاده کنید.

این قسمت هیچ لبه‌ای ندارد.

<div class="joqd green-lighten-4 no-border soft-corner elevate-2 demo-panel">
	<p>.این قسمت هیچ لبه‌ای ندارد</p>
</div>

جهت‌ها

لبه‌ی بالا

برای آن که فقط لبه‌ی بالایی عنصر را تغییر دهید، از پسوند top-border- بعد از نوع لبه استفاده کنید.

لبه‌ی بالایی این قسمت نیلی پهن است.

<div class="joqd indigo-lighten-5 thick-top-border indigo-border elevate-2 demo-panel">
	<p>.لبه‌ی بالایی این قسمت نیلی پهن است</p>
</div>
لبه‌ی پایین

برای آن که فقط لبه‌ی پایینی عنصر را تغییر دهید، از پسوند bottom-border- بعد از نوع لبه استفاده کنید.

لبه‌ی پایینی این قسمت قهوه‌ای پهن است.

<div class="joqd brown-lighten-5 thick-bottom-border brown-border elevate-2 demo-panel">
	<p>.لبه‌ی پایینی این قسمت قهوه‌ای پهن است</p>
</div>
لبه‌ی راست

برای آن که فقط لبه‌ی سمت راست عنصر را تغییر دهید، از پسوند right-border- بعد از نوع لبه استفاده کنید.

لبه‌ی سمت راست این قسمت صورتی پهن است.

<div class="joqd pink-lighten-5 thick-right-border pink-darken-1-border elevate-2 demo-panel">
	<p>.لبه‌ی سمت راست این قسمت صورتی پهن است</p>
</div>
لبه‌ی چپ

برای آن که فقط لبه‌ی سمت چپ عنصر را تغییر دهید، از پسوند left-border- بعد از نوع لبه استفاده کنید.

لبه‌ی سمت چپ این قسمت سبز روشن پهن است.

<div class="joqd light-green-lighten-5 thick-left-border light-green-darken-2-border elevate-2 demo-panel">
	<p>.لبه‌ی سمت چپ این قسمت سبز روشن پهن است</p>
</div>