ویژگی های چهار طرف کادر(border) در CSS

در مثال های درون مقالات اخیر، مشاهده کرده اید که این امکان وجود دارد که یک کادر متفاوت را برای هر سمت یک عنصر مشخص کنیم. در CSS، برای مشخص کردن هر طرف از کادر یک عنصر، ویژگی های(property) خاصی وجود دارد(top و right و bottom و left).

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

با استفاده از کد زیر، نتیجه ای مانند مثال بالا، ایجاد می شود:

p {
  border-style: dotted solid;
}

در زیر، شیوه ی کار کردن این کدها توضیح داده شده است:

فرض کنید بخواهیم ویژگی border-style چهار مقدار داشته باشد:

border-style: dotted solid double dashed;

1. کادر بالایی(top) برابر با dotted است.
2. کادر سمت راست(right) برابر solid است.
3. کادر پایین(bottom) برابر با double است.
4. کادر سمت چپ(left) برابر با dashed است.

فرض کنید بخواهیم ویژگی border-style سه مقدار داشته باشد:

border-style: dotted solid double;

1. کادر بالایی(top) برابر با dotted است.
2. کادر سمت راست(right) و چپ(left) برابر solid است.
3. کادر پایین(bottom) برابر با double است.

فرض کنید بخواهیم ویژگی border-style دو مقدار داشته باشد:

border-style: dotted solid;

1. کادر بالایی(top) و پایینی(bottom) برابر با dotted است.
2. کادر سمت راست(right) و چپ(left) برابر solid است.

فرض کنید بخواهیم ویژگی border-style یک مقدار داشته باشد:

border-style: dotted;

1. تمام چهار طرف برابر با dotted است.

 /* چهار مقدار */
p {
  border-style: dotted solid double dashed;
}

/* سه مقدار */
p {
  border-style: dotted solid double;
}

/* دو مقدار */
p {
  border-style: dotted solid;
}

/* یک مقدار */
p {
  border-style: dotted;
} 

نکته: از ویژگی border-style در مثال بالا استفاده شده است. اما می توانیم از border-width و border-color نیز در آن استفاده کنیم.