Border

A border is a line drawn around an element's padding and content. Borders can be used for visual definition, decoration, or to separate elements. They have three main components: width, style, and color.

Border Shorthand

CSS

/* Border shorthand: width style color */
.element {
  border: 2px solid #333;
}

/* Border with transparent color */
.element {
  border: 2px solid transparent;
}

/* Individual properties */
.element {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Border on specific sides */
.element {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 2px solid orange;
}

Border Styles

Style	Appearance	Common Use
solid	Continuous line	General purpose borders
dashed	Dashes with gaps	Indicating draft/temporary
dotted	Dots with gaps	Decorative, soft edges
double	Two parallel lines	Emphasis, separators

CSS

/* Different border styles */
.solid {
  border: 2px solid #333;
}

.dashed {
  border: 2px dashed #333;
}

.dotted {
  border: 2px dotted #333;
}

.double {
  border: 5px double #333;
}

Practical Examples

CSS

/* Button with border */
button {
  padding: 12px 24px;
  border: 2px solid #0066cc;
  background: white;
  color: #0066cc;
  cursor: pointer;
}

button:hover {
  background: #f0f0f0;
}

/* Card with subtle border */
.card {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

/* Input field with focus state */
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input:focus {
  border: 2px solid #0066cc;
  outline: none;
}

Note

Borders create visual definition. They have three properties: width, style, and color. Use borders to separate content or create focus states for interactive elements.

Border radius: [Border Radius](/css/border-radius).