کناره‌های CSS

ویژگی حاشیه CSS

CSS border ویژگی به شما اجازه می‌دهد تا سبک، عرض و رنگ حاشیه‌های عنصر را تنظیم کنید.

تمام حاشیه‌های من دارای حاشیه هستند.

من یک حاشیه قرمز برای پایین دارم.

من حاشیه‌های گرد دارم.

من یک حاشیه آبی برای سمت چپ دارم.

نوع حاشیه CSS

border-style ویژگی مشخص می‌کند که چه نوع حاشیه‌ای باید نمایش داده شود.

مقدارهای زیر مجاز هستند:

  • dotted - تعریف حاشیه dotted
  • dashed - تعریف حاشیه dashed
  • solid - تعریف حاشیه solid
  • double - تعریف حاشیه double
  • groove - تعریف حاشیه groove سه‌بعدی. اثر بستگی به مقدار border-color دارد
  • ridge - تعریف حاشیه ridge سه‌بعدی. اثر بستگی به مقدار border-color دارد
  • inset - تعریف حاشیه inset سه‌بعدی. اثر بستگی به مقدار border-color دارد
  • outset - تعریف حاشیه outset سه‌بعدی. اثر بستگی به مقدار border-color دارد
  • none - تعریف حاشیه بدون حاشیه
  • hidden - تعریف حاشیه مخفی

border-style ویژگی می‌تواند یک تا چهار مقدار را تنظیم کند (برای حاشیه بالا، سمت راست، پایین و سمت چپ).

مثال

نمایش سبک‌های مختلف حاشیه:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

نتیجه:

حاشیه‌های خط‌های نقطه‌ای.

حاشیه‌های خط‌های شکسته.

حاشیه‌های خط‌های یکپارچه.

حاشیه‌های خط‌های دوگانه.

حاشیه‌های groove. اثر آن بستگی به border-color دارد.

حاشیه‌های ridged. اثر آن بستگی به border-color دارد.

حاشیه‌های inset 3D. اثر آن بستگی به border-color دارد.

حاشیه‌های outset 3D. اثر آن بستگی به border-color دارد.

بدون حاشیه.

حاشیه‌های مخفی.

حاشیه‌های ترکیبی.

آزمایش کنید

توجه:مگر اینکه تنظیم شده باشد border-style اگر این ویژگی تنظیم نشده باشد، هیچ یک از ویژگی‌های حاشیه CSS دیگر (که در فصل بعد توضیح داده می‌شود) هیچ اثری نخواهد داشت!