CSS Borders

Border Basics

The border property is shorthand for setting border-width, border-style, and border-color.

Border-style is required for borders to display. Common values: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden.

Borders add to the element's total size unless box-sizing: border-box is used.

/* Basic border */\n.box {\n  border: 1px solid black;\n}\n\n/* Individual sides */\n.card {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  border-left: none;\n  border-right: none;\n}\n\n/* Different styles */\n.dashed {\n  border: 2px dashed blue;\n}\n\n.dotted {\n  border: 3px dotted green;\n}\n\n/* Individual properties */\n.custom {\n  border-width: 2px;\n  border-style: solid;\n  border-color: #333;\n}

Border Radius

The border-radius property creates rounded corners on elements.

Values can be pixels, percentages, or em units.

Use 50% to create circles (on square elements) or perfect ovals.

Individual corners can be targeted: border-top-left-radius, etc.

/* Rounded corners */\n.button {\n  border: 2px solid blue;\n  border-radius: 5px;\n}\n\n/* Circle */\n.circle {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  background: red;\n}\n\n/* Individual corners */\n.custom {\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Pill shape */\n.pill {\n  border-radius: 50px;\n  padding: 10px 30px;\n}