border-style ගුණය

border-style ගුණය සියලු පැති සඳහා එකවර හෝ එක් එක් පැත්ත සඳහා වෙන වෙනම දාරයේ විලාසය සකසයි. මෙය පහත ගුණ සඳහා කෙටි යෙදුම් ගුණයකි: border-left-style, border-right-style, border-top-style, border-bottom-style.

වාක්‍ය රචනය

cssතෝරන්නා {
  border-style: අගය;
}

අගයන්

පෙරනිමි අගය: none.

අගයන්ගේ සංඛ්‍යාව

මෙම ගුණයට 1, 2, 3 හෝ 4 අගයන්, හිස් තැනකින් වෙන් කර දැක්වීමට හැකිය:

උදාහරණය . solid අගය

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . dotted අගය

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . dashed අගය

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . ridge අගය

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . double අගය

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . groove අගය

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . inset අගය

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය . outset අගය

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය

මෙම උදාහරණයේ විවිධ පැති සඳහා විවිධ ආකාරයේ දාර සකසා ඇත:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය

දැන් විවිධ පැති සඳහා වෙනස් ඝනකමකින් යුත් දාරයක් සහ එහි වර්ණය ද සකසා ඇත:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

උදාහරණය

දැන් ඉහළ සහ පහළ දාර සඳහා solid ආකාරය සකසා ඇත, දකුණු සහ වම් - dotted ආකාරය සකසා ඇත:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

මේවාත් බලන්න