گوشه

گوشه‌های تیز

برای داشتن گوشه‌های گرد از کلاس joqd sharp-corner استفاده کنید.

با گوشه‌های تیز، border-radius: 0px خواهد بود.

<div class="joqd red-darken-3 sharp-corner elevate-2 demo-panel">
	<p>.این قسمت گوشه‌های تیزی دارد</p>
</div>

گوشه‌های نرم

برای داشتن گوشه‌های نرم از کلاس joqd soft-corner استفاده کنید.

با گوشه‌های نرم، border-radius: 2px خواهد بود.

<div class="joqd blue-grey soft-corner elevate-2 demo-panel">
	<p>.این قسمت گوشه‌های نرمی دارد</p>
</div>

گوشه‌های گرد

برای داشتن گوشه‌های گرد از کلاس joqd round-corner استفاده کنید.

با گوشه‌های گرد، border-radius: 20px خواهد بود.

<div class="joqd deep-purple round-corner elevate-2 demo-panel">
	<p>.این قسمت گوشه‌های گردی دارد</p>
</div>

گوشه‌های دایره‌ای

برای داشتن گوشه‌های دایره‌ای (در واقع یک دایره) از کلاس joqd circle-corner استفاده کنید.

با گوشه‌های دایره‌ای، border-radius: 50% خواهد بود.

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

<div class="joqd blue circle-corner">
  <!-- این عنصر گرد است -->
</div>

گوشه‌های بالا

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

<div class="joqd indigo soft-top-corner elevate-2 demo-panel">
	<p>.گوشه‌های بالایی این قسمت، نرم هستند</p>
</div>

گوشه‌های پایین

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

<div class="joqd brown soft-corner elevate-2 demo-panel">
	<p>.گوشه‌های پایینی این قسمت، نرم هستند</p>
</div>

گوشه‌های راست

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

<div class="joqd pink-darken-1 soft-right-corner elevate-2 demo-panel">
	<p>.گوشه‌های سمت راست این قسمت، نرم هستند</p>
</div>

گوشه‌های چپ

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

<div class="joqd light-green-darken-2 soft-left-corner elevate-2 demo-panel">
	<p>.گوشه‌های سمت چپ این قسمت، نرم هستند</p>
</div>