Syntax
/* Shorthand: width style color */
border: 1px solid #1a2d45;
/* Sub-properties */
border-width: 1px;
border-style: solid;
border-color: #1a2d45;
Border Styles
| Value | Appearance |
|---|
| solid | A single solid line |
| dashed | A series of square-ended dashes |
| dotted | A series of round dots |
| double | Two parallel solid lines |
| none / hidden | No border (hidden also suppresses table border) |
| groove / ridge / inset / outset | 3D effect borders (depend on border-color) |
Individual Sides
/* Set each side separately */
border-top: 2px solid #6366f1;
border-right: 1px dashed #333;
border-bottom: 3px solid #ec4899;
border-left: 0;
/* Accent border (common pattern) */
.card {
border: 1px solid #0f1e32;
border-left: 3px solid #6366f1;
border-radius: 12px;
}
border-radius
/* All corners equal */
border-radius: 8px;
/* top-left top-right bottom-right bottom-left */
border-radius: 4px 12px 4px 12px;
/* Elliptical corners */
border-radius: 50%; /* circle (on square element) */
/* Asymmetric: horizontal / vertical radius */
border-radius: 40px 40px 0 0 / 20px 20px 0 0;
/* Individual corners */
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border vs outline
| Property | Affects layout? | Follows border-radius? | Use for |
|---|
| border | Yes — takes up space | Yes | Decorative borders |
| outline | No — drawn outside | Partially (outline-offset) | Focus indicators — never remove without replacement |
/* Never do this — removes accessibility */
:focus { outline: none; }
/* Do this instead — custom focus style */
:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 3px;
}