learn2kode.in

Menu

CSS Tutorial

Menu

CSS Border

The CSS Border property allows you to control the line that surrounds an element’s padding and content. Borders can be styled, colored, and sized. You can set borders individually for each side or use the shorthand border property. Borders are useful for creating separation, highlighting sections, making boxes, cards, buttons, and more.

Border Properties Table

Property Description
border-width Sets the thickness of the border
border-style Sets the border style (solid, dotted, dashed, etc.)
border-color Sets the color of the border
border Shorthand to set width, style, and color together
border-radius Rounds the corners of the border
border-top / border-right / border-bottom / border-left Applies border to an individual side

Examples

Basic Border

Copy Text 
.box {
  border: 2px solid black;
}

Different borders for each side

Copy Text 
.box {
  border-top: 3px solid red;
  border-right: 2px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 1px solid black;
}

Rounded Borders

Copy Text 
.box {
  border: 2px solid #333;
  border-radius: 10px;
}
CSS Display Property