تنظیمات حاشیه (border) عناصر در CSS

از این خاصیت برای تعیین خط حاشیه عناصری مانند div و img استفاده می شود. استفاده صحیح از border می تواند علاوه بر تعیین محدوده یک عنصر، به زیبایی بصری آن نیز کمک کند.

نحوه استفاده

حاشیه ها در چهار جهت (همانند اضلاع مربع یا مستطیل) به عناصر اعمال می شوند. این خاصیت را توسط سه پارامتر می توان مقداردهی کرد.

  • width: ضخامت خط حاشیه.
  • style: نوع خط حاشیه
  • color: رنگ.
div{
    border: 1px solid black;
}

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

  • solid: خط ممتد
  • dotted: نقطه چین
  • dashed: خط چین
  • double: دو خط

گوشه گرد کردن عناصر

نحوه نمایش پیش فرض عناصری مانند div و img بصورت مربعی یا مستطیلی با گوشه های نوک تیز می باشد. در صورتیکه قصد داشته باشید عناصر مورد نظر گوشه گرد شوند می توانید از خاصیت border-radius استفاده نمایید.

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

اگر از یک عدد استفاده کنید، مقدار تعیین شده برای هر چهار گوشه در نظر گرفته می شود.

div{
    border: 1px solid black;
    border-radius: 10px;
}

حاشیه ها در css

در صورتیکه از دو مقدار برای border-radius استفاده شود، مقدار اول برای گوشه های 1 و 3 و مقدار دوم برای گوشه های 2 و 4 تعیین می شود.

div{
    border: 1px solid black;
    border-radius: 10px  20px;
}

یکی دیگر از روش های تعیین border-radius استفاده از 4 مقدار می باشد که در اینصورت از گوشه شماره 2 بصورت ساعتگرد اعمال می شود.

مثال: 4 عدد div با عرض و ارتفاع 200px و ضخامت حاشیه 2px در صفحه ایجاد کرده و آنها را به شکل دایره ای تبدیل کنید، همچنین رنگ آنها یکی در میان قرمز و زرد باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      div{
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%;
      }
      .red{
        background-color: red;
      }
      .yellow{
        background-color: yellow;
      }
    </style>
  </head>
  <body>
      <div class="red"></div>
      <div class="yellow"></div>
      <div class="red"></div>
      <div class="yellow"></div>
  </body>
</html>