در بسیاری از مواقع ایجاد یک حاشیه مناسب برای عکس ها در صفحات وب لازم و جذاب مینماید. شما برا ایجاد حاشیه های مختلف برای تصاویر خود نیاز به استفاده از css دارید. برای استفاده از css در کافیست کد های css خود را در صفت style درون تگ img بنویسید. در این جا انواع حاشیه های موجود را معرفی کرده و مثالی از هر کدام را مشاهده خواهیم کرد.
در زیر مثال هایی از نمونه های مختلف حاشیه عکس با استفاده از css آمده است:

حاشیه مکعبی: (Solid Border)
ساده ترین و معمول ترین نوع حاشیه که از خطوط صاف تشکیل شده است.


<img style="border:1px solid black;" src="/files/photo.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه نقطه ای: (Dotted Border)
حاشیه ای که با استفاده از نقاط پشت سر هم ساخته می شود.


<img style="border:2px dotted #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه شیاری: (Grooved Border)


<img style="border:6px groove #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه دوبل: (Double Border)
حاشیه دوبل در واقع دو حاشیه ساده با فاصله مشخص از یکدیگر میباشد.


<img style="border:6px double #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه بیرون آمده: (Outset Border)
این حاشیه حس بیرون آمدگی تصویر از زمینه را منتقل می کند.


<img style="border:6px outset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه تو رفته: (Inset Border)
این حاشیه حس تو رفتگی تصویر را منتقل می کند.


<img style="border:6px inset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه لبه دار: (Ridged Border)
حاشیه ای همانند شیار یا لبه


<img style="border:6px ridge #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه با خط تیره: (Dashed Border)
حاشیه ای که با استفاده از خط تیره ساخته می شود.


<img style="border:6px dashed #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

حاشیه ترکیبی: (Mixed Border)
این نوع حاشیه ها در واقع ترکیبی انواع دیگر هستند که شما می توانید براحتی هر ضلع حاشیه را به نوعی مجزا در بیاورید.


<img style="border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

اگر به گوشه های تمامی حاشیه دقت کنید متوجه می شوید که تمامی آنها تیز هستند. با استفاده از صفت border-radius در css می توان گوشه های حاشیه ها را از حالت تیزی در آورد و آنها به اندازه دلخواه خم کرد. به مثال زیر دقت کنید.


<img style="border:1px solid black;border-radius:1em;" src="/files/photo.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand

خم کردن حاشیه ها:
در مثال بالا چهار گوشه حاشیه را به یک اندازه خم شده اند،در css این امکان نیز وجود دارد که هر گوشه را بصورت مستقل از بقیه خم شوند، برای این کار باید از چهار دستور زیر استفاده کرد، که به ترتیب برای گوشه بالا راست، گوشه بالا چپ، گوشه پایین راست و گوشه پایین چپ می باشند:


border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

به مثال توجه کنید:


<img style="border:1px solid black;border-top-left-radius: 1em;border-top-right-radius: 0px;border-bottom-right-radius: 50px;border-bottom-left-radius:2em;" src="/files/photo.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Milford Sound in New Zealand