حاشیه‌ها یا بوردرها (Borders) - قاب تصویر 🖼️

Border سه چیز میخواد: ضخامت، استایل، و رنگ

۱. مقدمه: ساختار Border

border: 2px solid black;
/*      ^^^ ^^^^^ ^^^^^
        |    |     رنگ
        |    استایل (solid, dashed, dotted...)
        ضخامت
*/

۲. استایل‌های مختلف Border

border-style: solid;    /* خط یکپارچه */
border-style: dashed;   /* خط چین */
border-style: dotted;   /* نقطه‌چین */
border-style: double;   /* دو خط */
border-style: groove;   /* فرورفته ۳D */
border-style: ridge;    /* برجسته ۳D */
border-style: inset;    /* داخل‌رفته */
border-style: outset;   /* بیرون‌زده */
border-style: none;     /* بدون حاشیه */

.box1 {{ border: 3px solid #333; }}
.box2 {{ border: 3px dashed #f00; }}
.box3 {{ border: 5px dotted #00f; }}
.box4 {{ border: 6px double green; }}

۳. کنترل جداگانه هر طرف

می‌تونید هر ضلع رو جدا استایل بدید:

/* روش اول: مشخص کردن هر طرف */
border-top: 2px solid red;
border-right: 4px dashed blue;
border-bottom: 2px solid red;
border-left: 4px dashed blue;

/* روش دوم: Shorthand */
border-width: 2px 4px 2px 4px;  /* بالا راست پایین چپ */
border-style: solid dashed solid dashed;
border-color: red blue red blue;

/* اگه یکسانن: */
border-width: 2px;        /* همه طرف‌ها */
border-width: 2px 4px;    /* بالا-پایین | راست-چپ */

۴. شعاع حاشیه (Border Radius) - گوشه‌های گرد

یکی از محبوب‌ترین ویژگی‌های CSS3!

border-radius: 10px;        /* همه گوشه‌ها */
border-radius: 50%;         /* دایره کامل (برای مربع) */

/* هر گوشه جدا: */
border-radius: 10px 20px 30px 40px;
/*             بالا-چپ  بالا-راست  پایین-راست  پایین-چپ */

/* شکل‌های خاص: */
border-radius: 50% 50% 0 0;  /* نیم‌دایره در بالا */

/* عکس پروفایل دایره‌ای */
.avatar {{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}}

/* دکمه Pill */
.btn-pill {{
  padding: 10px 20px;
  border-radius: 25px;
}}

/* کارت مدرن */
.card {{
  border-radius: 12px;
}}

۵. افکت‌های حرفه‌ای با Border

الف) مثلث با Border!

جالبه! می‌شه با بوردر مثلث کشید:

.triangle {{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}}

ب) حاشیه گرادینتی

.gradient-border {{
  border: 5px solid;
  border-image: linear-gradient(45deg, red, blue) 1;
}}

.profile-container {{
  position: relative;
  display: inline-block;
}}

.avatar {{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}}

.badge {{
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f00;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}}

  
  3