Border ng CSS

CSS Border Attribute

CSS border Ang attribute ay nagbibigay ng kapangyarihan sa iyo na magtakda ng estilo, lapad at kulay ng border ng elemento.

Mayroon akong border sa lahat ng aking gilid.

Mayroon akong mag-asang border na pula sa pababa.

Mayroon akong border na may rounding corners.

Mayroon akong mag-asang border na asul.

CSS Border Style

border-style Ang attribute ay nangangahulugan na anong uri ng border na ipapakita.

Pinapayagan ang mga sumusunod na halaga:

  • dotted - Idefinir ang dotted border
  • dashed - Idefinir ang dashed border
  • solid - Idefinir ang solid border
  • double - Idefinir ang dual border
  • groove - Idefinir ang 3D groove border. Ang epekto ay depende sa halaga ng border-color
  • ridge - Idefinir ang 3D ridge border. Ang epekto ay depende sa halaga ng border-color
  • inset - Idefinir ang 3D inset border. Ang epekto ay depende sa halaga ng border-color
  • outset - Idefinir ang 3D outset border. Ang epekto ay depende sa halaga ng border-color
  • none - Idefinir ang walang border
  • hidden - Idefinir ang nakatagong border

border-style Ang attribute ay maaaring magkaroon ng isa hanggang apat na halaga (para sa border na itaas, kanan, pababa at kaliwa).

Mga halimbawa

Ipinapakita ang iba't ibang uri ng estilo ng border:

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;}

Result:

Dashed border.

Dotted border.

Solid border.

Dashed border.

Groove border. Its effect depends on the value of border-color.

Ridge border. Its effect depends on the value of border-color.

3D inset border. Its effect depends on the value of border-color.

3D outset border. Its effect depends on the value of border-color.

No border.

Hidden border.

Mixed border.

Try it yourself

Note:Unless set border-style Properties, otherwise other CSS border properties (which will be explained in detail in the next chapter) will not have any effect!