آموزش CSS - گوشه های گرد (rounded corners)

خاصیت border-radius در CSS3 به شما امکان می‌دهد تا گوشه‌های گرد برای المان‌های خود ایجاد کنید. این خاصیت به شما این امکان را می‌دهد که با تعیین شعاع (radius)، گوشه‌های یک المان را گرد کنید.


#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}

جدول زیر مقادیر ممکن برای گوشه های گرد را به صورت زیر نشان می دهد

ردیف	مقدار و توضیحات
۱	border-radius: در CSS برای تنظیم شعاع گوشه‌های یک المان استفاده می‌شود و این به شما امکان می‌دهد تا گوشه‌های گردی برای المان خود ایجاد کنید. این خاصیت برای تنظیم چهار خاصیت شعاع حاشیه مورد استفاده قرار می‌گیرد، که به ترتیب مشخص می‌کنند که گوشه‌های بالا سمت چپ، بالا سمت راست، پایین سمت راست و پایین سمت چپ چه شعاعی داشته باشند.
۲	border-top-left-radius : در CSS، خاصیت border-top-left-radius برای تنظیم شعاع حاشیه گوشه بالا و چپ یک المان استفاده می‌شود. این خاصیت به شما امکان می‌دهد تا شعاع گوشه بالا و چپ المان را تنظیم کنید تا ظاهری گردتر و زیباتر به المان بدهید.
۳	border-top-right-radius : در CSS، خاصیت border-top-right-radius برای تنظیم شعاع حاشیه گوشه بالا و راست یک المان استفاده می‌شود. این خاصیت به شما امکان می‌دهد تا شعاع گوشه بالا و راست المان را تنظیم کنید تا ظاهری گردتر و زیباتر به المان بدهید.
۴	border-bottom-right-radius :در CSS، خاصیت border-bottom-right-radius برای تنظیم شعاع حاشیه گوشه پایین و راست یک المان استفاده می‌شود. این خاصیت به شما امکان می‌دهد تا شعاع گوشه پایین و راست المان را تنظیم کنید تا ظاهری گردتر و زیباتر به المان بدهید.
۵	border-bottom-left-radius :در CSS، خاصیت border-bottom-left-radius برای تنظیم شعاع حاشیه گوشه پایین و چپ یک المان استفاده می‌شود. این خاصیت به شما امکان می‌دهد تا شعاع گوشه پایین و چپ المان را تنظیم کنید تا ظاهری گردتر و زیباتر به المان بدهید.

مثال


<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body>
</html>

خاصیت شعاع گوشه ها (Each Corner property)

در CSS، برای تنظیم شعاع حاشیه گوشه‌ها می‌توان از چهار خاصیت مختلف استفاده کرد که هر کدام به تنظیم گوشه‌های مختلف المان کمک می‌کنند. این چهار خاصیت به ترتیب شامل موارد زیر هستند:

border-top-left-radius: برای تنظیم شعاع گوشه بالا و سمت چپ المان استفاده می‌شود.
border-top-right-radius: برای تنظیم شعاع گوشه بالا و سمت راست المان استفاده می‌شود.
border-bottom-right-radius: برای تنظیم شعاع گوشه پایین و سمت راست المان استفاده می‌شود.
border-bottom-left-radius: برای تنظیم شعاع گوشه پایین و سمت چپ المان استفاده می‌شود.
هر یک از این خاصیت‌ها به شما امکان می‌دهد تا شعاع گوشه‌های مورد نظر را تعیین کنید، بنابراین می‌توانید با استفاده از ترکیب این چهار خاصیت، شکل گوشه‌های دلخواه را بسازید.


<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body>
<body>

اعتبارسنجی ها - درس قبلی

درس بعدی - حاشیه تصویر (Border Image)