CSS Borders

The border property adds a line around an element.

Border Shorthand

border: width style color — e.g., border: 2px solid #ddd

Border Styles

Common values: solid, dashed, dotted, double, none

Border Radius

border-radius rounds the corners of an element. Setting it to 50% creates a circle.

Individual Sides

You can set borders on individual sides: border-top, border-right, border-bottom, border-left.

Example

.box {
  border: 2px solid #6366f1;
  border-radius: 8px;
}

.pill {
  border: 1px solid #d1d5db;
  border-radius: 999px;    /* fully rounded */
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #6366f1;
}

.underline {
  border: none;
  border-bottom: 2px solid #6366f1;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned