منبع مطلب :

http://www.entheosweb.com/

 
 
با ویژگی border می توان حاشیه برای محتویات تگ ها ایجاد کرد
css borders
 برای گرد کردن گوشه های حاشیه ، به نکات زیر دقت کنید :

 حاشیه با گوشه های گرد توسط مرورگرهای زیر پشتیبانی می شود :

IE9, Opera 8+, Firefox و Chrome & Safari.

  •  برای اینکه در مرورگر ie , opera گوشه های گرد نشان داده شوند از ویژگی زیر استفاده کنید :

border-radius

  •   برای اینکه در مرورگر firefox گوشه های گرد نشان داده شوند از ویژگی زیر استفاده کنید :
-moz-border-radius

  •    برای اینکه در مرورگر safari , chrome گوشه های گرد نشان داده شوند از ویژگی زیر استفاده کنید :
 -webkit-border-radius
 
 نکته بسیار مهم :

 برای اینکه بتوانید ، حاشیه را ببینید باید مقادیر زیر را مشخص نمائید :

border-color

border-width

border-style

 
 اولین عدد بعد از دستور گرد کردن ، میزان گردی در گوشه بالا سمت چپ است
  دومین عدد بعد از دستور گرد کردن ، میزان گردی در گوشه بالا سمت راست است
  سومین عدد بعد از دستور گرد کردن ، میزان گردی در گوشه پائین سمت راست است
   چهارمین  عدد بعد از دستور گرد کردن ، میزان گردی در گوشه پائین سمت چپ است
 مثال - روش ایجاد شکل زیر
line1
line2
line3

pre{

 

width:5cm;

height:3cm;

text-aign:center;

 

 

border-style:solid;

border-color:green;

border-width:3px;

 

 

 border-radius:100px 100px 0 0 ;

-moz-border-radius:100px 100px 0 0 ;

-webkit-border-radius:100px 100px 0 0 ;

 

}

 
 مثال - روش ایجاد شکل زیر :
line1
line2
line3

pre

{

width:5cm;

height:3cm;

text-align:center;

 


 border-width: 4px 30px 4px 30px;

border-style: groove ridge dashed groove;

border-color: #cc0000;

border-radius:100px 100px 0 0 ;

-moz-border-radius:100px 100px 0 0 ;

-webkit-border-radius:100px 100px 0 0 ;

}

 
 مثال - روش ایجاد شکل زیر :
line1
line2
line3

pre

{

width:5cm;

height:3cm;

text-align:center;

 

border-color:red;

border-width:3px;

border-style:solid;

 

 border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

مثال -  روش ایجاد شکل زیر :
line1
line2
line3
 

pre

{

 

text-algin:center;

width:5cm;

height:3cm;

 

 

 

border-color:green;

 border-width: 0px 12px 0px 12px;

border-style: double; border-color: violet;


border-radius:40px 40px 60px 60px;

-moz-border-radius:40px 40px 60px 60px;

-webkit-border-radius:40px 40px 60px 60px;

}

 مثال -روش ایجاد شکل زیر :
line1
line2
line3

pre

{

text-align:center;

width:5cm;

height:3cm;

 

border-style:solid;

border-color:green;

border-width:3px;

 

 

 border-radius: 20px 100px 100px 20px;

-moz-border-radius: 20px 100px 100px 20px;

-webkit-border-radius: 20px 100px 100px 20px;

}

 
 مثال - روش ایجاد شکل زیر :
line1
line2
line3

pre

{

text-align:center;

width:5cm;

height:3cm;

 

 

 border-width: 12px;

border-style: groove;

border-color: red blue green black;

 


border-radius:20px 20px 20px 20px;

-moz-border-radius:20px 20px 20px 20px;

-webkit-border-radius:20px 20px 20px 20px;

}

 مثال - روش ایجاد شکل زیر :
line1
line2
line3

pre

{

text-align:center;

width:5cm;

height:3cm;

 

 border-width: 5px;

border-style: solid;

border-color: red;

 


 border-radius: 0 120px 0 120px;

-moz-border-radius: 0 120px 0 120px;

-webkit-border-radius: 0 120px 0 120px;

}

 
 مثال - روش ایجاد شکل زیر :
line1
line2
line3

pre

{

text-align:center;

width:5cm;

height:3cm;

 

 

 background:orange;

border-width:4px 30px 4px 30px;

border-style: solid;

border-color: #56c6d9 #56c6d9 #fe2192 #fe2192;

border-radius:0 120px 0 120px;

-moz-border-radius:0 120px 0 120px;

-webkit-border-radius:0 120px 0 120px;

}