CSS Borders of Each Side

CSS Border - Mag-isa na border

Sa nakaraang kabanata, nakita mo na maaaring magbigay ng iba't ibang border para sa bawat gilid.

Sa CSS, mayroon pang ilang attribute na maaring gamitin upang tukuyin ang bawat border (itaas, kanan, ibaba at kaliwa):

Example

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

Ang resulta:

Mga iba't ibang estilo ng border

Try It Yourself

Mga iba't ibang estilo ng border

Ang resulta ng nakaraang halimbawa ay katulad nito:

Example

p {
  border-style: dotted solid;
}

Try It Yourself

Ang paraan ng kanyang paggagana ay tulad nito:

If border-style Ang pagtatakda ng attribute ay apat na halaga:

border-style: dotted solid double dashed;

  • Ang pangunahing liwanag ay magiging halos linya
  • Ang pangunahing liwanag ay magiging tunay na linya
  • Ang pangunahing liwanag ay magiging dalawang linya
  • Ang pangunahing liwanag ay magiging halos linya

If border-style Ang pagtatakda ng attribute ay tatlong halaga:

border-style: dotted solid double;

  • Ang pangunahing liwanag ay magiging halos linya
  • the right and left borders are solid lines
  • Ang pangunahing liwanag ay magiging dalawang linya

If border-style The attribute sets two values:

border-style: dotted solid;

  • the top and bottom borders are dotted lines
  • the right and left borders are solid lines

If border-style The attribute sets a single value:

border-style: dotted;

  • All four sides are dotted lines

Example

/* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three values */
p {
  border-style: dotted solid double; 
}
/* Two values */
p {
  border-style: dotted solid; 
}
/* A value */
p {
  border-style: dotted; 
}

Try It Yourself

is used in the above example border-style Attribute. But border-width and border-color Also applies.