Rounded Corner ng Border ng CSS

Rounded Corner ng Border ng CSS

border-radius Ang apektibyo ay ginamit upang magdagdag ng malambot na border sa elemento:

Karaniwang border

Mga malambot na border

Mga malambot na border

Mga malambot na border

Halimbawa

p {
  border: 2px solid red;
  border-radius: 5px;
}

Subukan ang iyong sarili

Higit pang mga halimbawa

Lahat ng apektibyo ng bawat bawat ibaba na border sa isang pahayag
Ito ay naglalarawan ng isang maikling apektibyo, na ginamit upang itatayo ang lahat ng apektibyo ng bawat bawat ibaba na border sa isang pahayag.
Itatayo ang estilo ng bawat bawat ibaba na border
Ito ay naglalarawan kung paano itatayo ang estilo ng bawat bawat ibaba na border.
Set the width of the left border
Ang halimbawa na ito ay nagpapakita kung paano ito ay magtatakda ng lapad ng kaliwang border.
Set the color of the four borders
Ang halimbawa na ito ay nagpapakita kung paano ito ay magtatakda ng kulay ng apat na border. Maaaring magkaroon ito ng isang hanggang apat na kulay.
Set the color of the right border
Ang halimbawa na ito ay nagpapakita kung paano ito ay magtatakda ng kulay ng kanang border.

All CSS border properties

Attribute Description
border Abbreviated property, sets all border properties in one declaration.
border-color Abbreviated property, sets the color of all four borders.
border-radius Abbreviated property, can set all four border-radius properties for rounded corners.
border-style Abbreviated property, sets the style of all four borders.
border-width Abbreviated property, sets the width of all four borders.
border-bottom Abbreviated property, sets all bottom border properties in one declaration.
border-bottom-color Set the color of the bottom border.
border-bottom-style Set the style of the bottom border.
border-bottom-width Set the width of the bottom border.
border-left Abbreviated property, sets all left border properties in one declaration.
border-left-color Set the color of the left border.
border-left-style Set the style of the left border.
border-left-width Set the width of the left border.
border-right Abbreviated property, sets all right border properties in one declaration.
border-right-color Set the color of the right border.
border-right-style Set the style of the right border.
border-right-width Set the width of the right border.
border-top Abbreviated property, sets all top border properties in one declaration.
border-top-color Set the color of the top border.
border-top-style Set the style of the top border.
border-top-width Set the width of the top border.