بدون استفاده از فتوشاپ شما با css3 می تونین :

  • حاشیه یا border با گوشه های گرد بسازین 
  • زیر box ها سایه انداخت
  • از تصویری بعنوان border استفاده کرد
 
ویژگی border-radius
می تونین یه عدد جلوی border-radius بنویسین در نتیجه هر چهار گوشه به یه اندازه گرد میشن

اما اگه بخواین بعضی از گوشه ها رو گرد کنین یا هر چهار گوشه با اندازه های مختلف گرد بشن از ویژگیهای زیر استفاده کنین :

border-top-left-radius:عدد;
border-top-right-radius:عدد;
border-bottom-right-radius:عدد;
border-bottom-left-radius:عدد;

 
 
 
 
 

 مرورگرهای زیر از این ویژگی پشتیبانی می کنه :

Internet Explorer Firefox Opera Google Chrome Safari

  • فایر فاکس
  • اینترنت اکسپلورر 9
  • سفری
  • اپرا
  • گوگل کروم

 

 مثال :
گوشه های  تگ دایو را  گرد می کنه
 div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

 خط اول : یعنی border با ضخامت 2 پیکسل و نوع خط یکپارچه یا solid

خط دوم : میزان گرد شدن هر چهار طرف میشه 25 پیکسل

خط سوم : برای اینکه در فایر فاکس های قدیمی هم چهار طرف گرد بشه از این دستور استفاده شده

 مشاهده و اجرای برنامه کامل
 برای مشاهده اثر اعداد مختلف در گرد شدن کلیک کنید
ویژگی box-shadow
 از این ویژگی برای سایه انداختن زیر محتویات صفحه وب استفاده می شه
روش استفاده از این ویژگی :
box-shadow: h-shadow v-shadow blur spread color inset;
  h-shadow  : فکر کنم میشه فاصله افقی سایه از لبه محتوای تگ
v-shadow : فکر کنم میشه فاصله عمودی سایه از لبه محتوای تگ
 blur : میزان محو شدن لبه سایه است
spread : اندازه سایه است
color : رنگ سایه است
inset : سایه را بصورت inner یا outer نشون می ده 
برای مشاهده اثر هر یک از گزینه های بالا کلیک کنید

 مرورگرهای زیر از این ویژگی پشتیبانی می کنه :

Internet Explorer Firefox Opera Google Chrome Safari

  • فایر فاکس
  • اینترنت اکسپلورر 9
  • سفری
  • اپرا
  • گوگل کروم
 مثال
 در مثال زیر تمام تگ های دایو صفحه وب دارای سایه ای با اندازه مشخص شده می شوند
 div
{
box-shadow: 10px 10px 5px #888888;
}
 مشاهده و اجرای برنامه کامل
 
ویژگی border-image
 با این ویژگی شما می تونین از یک تصویر یعنوان border استفاده کنین
روش استفاده از این ویژگی :

 

border-image: source slice width outset repeat;

 

source : نام و مسیر تصویر مورد نظر است

slice :خودتون مقدار بدین متوجه می شین چکار می کنه!چشمک

width: عرض تصویر در border است

outset : خودتون مقدار بدین متوجه می شین چکار می کنه !چشمک

repeat : می گه تصویر مورد نظر در اطراف border مدام تکرار بشه یا کشیده بشه مقدارش می تونه round یا stretch باشه 

 
 

 مثلا از تصویر زیر می خوایم بعنوان border استفاده کنیم :

 مثال
 div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

مرورگرهای زیر از این ویژگی پشتیبانی می کنه :

Internet Explorer Firefox Opera Google Chrome Safari

  •  moz-border-image

در فایر فاکس قدیمی این ویژگی شناخته میشه

  •  webkit-border-image
مرورگرهای سفری و کروم این ویژگی رو میشناسن
  •  -o-border-image

مرورگر اپرا این ویژگی رو میشناسن

 مشاهده و اجرای برنامه کامل
 اجرای نمونه کار