ForgeLearn
|$ curl https://forge-ai.dev/api/markdown?path=docs/css/borders
$cat docs/borders-&-outlines.md
updated Yesterday·11 min read·published

Borders & Outlines

◆CSS◆Borders◆Styling◆Beginner
border-width

The border-width property sets the thickness of an element's border. It can be specified as a length value (px, em, etc.) or using the keyword values thin, medium (default), and thick.

border-width.css
CSS
1/* Individual border-width properties */
2.element {
3 border-top-width: 2px;
4 border-right-width: 4px;
5 border-bottom-width: 2px;
6 border-left-width: 4px;
7}
8
9/* Keyword width values (browser-dependent exact px) */
10.thin-border { border-width: thin; } /* typically 1px */
11.medium-border { border-width: medium; } /* typically 3px (default) */
12.thick-border { border-width: thick; } /* typically 5px */
13
14/* Shorthand (must be used with border-style) */
15.element {
16 border-width: 2px; /* all sides */
17 border-width: 2px 4px; /* vertical | horizontal */
18 border-width: 2px 4px 6px; /* top | horizontal | bottom */
19 border-width: 2px 4px 6px 8px; /* top right bottom left */
20 border-style: solid; /* required — border-style defaults to none */
21}
22
23/* Logical properties for border-width */
24.element {
25 border-block-width: 2px; /* top and bottom */
26 border-inline-width: 1px; /* left and right (in LTR) */
27}
border-style

The border-style property determines the visual pattern of the border. This property is required to make a border visible — setting border-width alone is not enough because the default style is none.

ValueDescriptionPreview
solidSingle solid line━━━━
dashedSeries of short dashes┅┅┅┅
dottedSeries of dots⋯⋯⋯⋯
doubleTwo parallel solid lines════
grooveCarved-in 3D effect▄▄▄▄
ridgeExtruded 3D effect▀▀▀▀
insetElement appears recessed▄▄▄▄
outsetElement appears raised▀▀▀▀
noneNo border (default)—
hiddenNo border (table conflict resolution)—
preview
border-color

The border-color property sets the color of the border. Like other border sub-properties, it accepts one to four values for different sides. If not specified, border-color defaults to the element's color property.

border-color.css
CSS
1/* Border color options */
2.element {
3 border-color: #00FF41; /* all sides green */
4 border-color: #00FF41 #333; /* top/bottom green, left/right #333 */
5 border-color: red #00FF41 blue; /* top red, sides green, bottom blue */
6 border-color: red #00FF41 blue orange; /* clockwise */
7}
8
9/* Border-color defaults to current text color */
10.text-colored-border {
11 color: #00FF41;
12 border: 2px solid; /* border will be #00FF41 (matches color) */
13 /* This is the default behavior — border-color = color if not set */
14}
15
16/* Transparent borders — useful for spacing tricks */
17.transparent-border {
18 border: 2px solid transparent;
19 /* Takes up space in the box model but is invisible */
20 /* Useful for hover effects to avoid layout shift */
21}
22
23/* Border with CSS variables */
24:root { --accent: #00FF41; }
25.accent-border {
26 border: 1px solid var(--accent);
27}
border Shorthand

The border shorthand is the most common way to set borders. It combines border-width, border-style, and border-color in a single declaration. The only required value is border-style — the others default if omitted.

border-shorthand.css
CSS
1/* Border shorthand — width | style | color */
2.element {
3 border: 2px solid #00FF41;
4}
5
6/* Only style required — width defaults to medium, color to currentColor */
7.border-only-style {
8 border: solid; /* medium solid currentColor */
9}
10
11/* Individual side shorthands */
12.element {
13 border-top: 1px solid #333;
14 border-right: 2px solid #00FF41;
15 border-bottom: 1px solid #333;
16 border-left: 2px solid #00FF41;
17}
18
19/* Logical border shorthands */
20.element {
21 border-block: 2px solid #00FF41; /* top and bottom borders */
22 border-inline: 1px solid #333; /* left and right borders */
23 border-block-start: 3px solid #FFB000; /* just the top border */
24}
25
26/* Practical example: focus ring with space */
27.button:focus-visible {
28 border: 2px solid #00FF41;
29 outline: 2px solid #00FF41;
30 outline-offset: 2px;
31}
border-radius

The border-radius property rounds the corners of an element. It can be applied uniformly to all corners or customized per corner. Large values create pill or circular shapes. This property is essential for modern, friendly UI design.

border-radius.css
CSS
1/* Uniform border-radius */
2.rounded { border-radius: 8px; }
3.pill { border-radius: 9999px; } /* fully rounded — pill shape */
4.circle { border-radius: 50%; } /* perfect circle (needs equal w/h) */
5
6/* Per-corner border-radius */
7.element {
8 border-radius: 8px 4px 8px 4px; /* top-left top-right bottom-right bottom-left */
9}
10
11/* Two-value border-radius */
12.element {
13 border-radius: 8px 16px; /* top-left + bottom-right | top-right + bottom-left */
14}
15
16/* Individual corner properties */
17.element {
18 border-top-left-radius: 8px;
19 border-top-right-radius: 4px;
20 border-bottom-right-radius: 8px;
21 border-bottom-left-radius: 4px;
22}
23
24/* Elliptical corners — x / y syntax */
25.element {
26 border-radius: 16px / 8px; /* x-radius: 16px, y-radius: 8px */
27 border-radius: 50% / 20%; /* elliptical shape */
28}
29
30/* Using border-radius with backgrounds */
31.card {
32 background: #0D0D0D;
33 border-radius: 12px;
34 overflow: hidden; /* clips children to border-radius */
35}
36
37/* Terminal-style button */
38.terminal-btn {
39 border: 1px solid #00FF41;
40 border-radius: 4px;
41 color: #00FF41;
42 background: transparent;
43}
preview
border-image

The border-image property allows you to use an image as a border. It slices the image into nine parts (four corners, four edges, and the center) and applies them to the corresponding border regions.

border-image.css
CSS
1/* border-image basics */
2.element {
3 border: 10px solid transparent;
4 border-image: url("border.png") 30 stretch;
5 /* 30 = slice amount, stretch = edge repeat behavior */
6}
7
8/* border-image: source slice width outset repeat */
9.element {
10 border-image-source: url("border.png"); /* image source */
11 border-image-slice: 30; /* slices from edges (no units) */
12 border-image-width: 10px; /* border width */
13 border-image-outset: 0; /* how far extends beyond border */
14 border-image-repeat: stretch; /* stretch | repeat | round | space */
15}
16
17/* Using gradients as border images */
18.gradient-border {
19 border: 3px solid transparent;
20 border-image: linear-gradient(135deg, #00FF41, #FFB000) 1;
21 /* Creates a gradient border effect */
22}
23
24/* Border-image with round repeat */
25.rounded-border-image {
26 border: 15px solid transparent;
27 border-image: url("pattern.png") 30 round;
28}
📝

note

border-image renders on top of the background but beneath the content. It does not affect the border-radius — elements with both border-image and border-radius will have square corners on the image border. Use background-image with mask for rounded gradient borders.
outline vs border

Outlines are similar to borders but differ in two crucial ways: they do NOT take up space in the box model, and they can be non-rectangular (following the shape of border-radius only in some browsers). Outlines are drawn outside the border edge and are primarily used for focus indicators.

AspectBorderOutline
Box modelTakes up spaceDoes NOT take space
Individual sidesCan style per sideAlways all sides
OffsetNo offset propertyoutline-offset
border-radiusFollows radiusMay not follow radius (browser-dependent)
Shorthandborder: 1px solid redoutline: 1px solid red
outline-vs-border.css
CSS
1/* Border — takes up layout space */
2.bordered {
3 border: 2px solid #00FF41;
4 padding: 8px;
5 /* The border adds to the element's visual size */
6 /* In border-box: width includes border */
7}
8
9/* Outline — no layout impact */
10.outlined {
11 outline: 2px solid #00FF41;
12 outline-offset: 2px; /* drawn 2px outside the border edge */
13 /* No layout shift when adding/removing outline */
14}
15
16/* Focus indicator best practice */
17:focus-visible {
18 outline: 2px solid #00FF41;
19 outline-offset: 2px;
20 /* Never use outline: none without providing an alternative */
21}
22
23/* Debugging with outlines — no layout shift */
24.debug * {
25 outline: 1px solid rgba(255, 0, 0, 0.3);
26}
27
28/* Outline that follows border-radius (in Firefox) */
29.rounded-outline {
30 border-radius: 8px;
31 outline: 2px solid #00FF41;
32 outline-offset: 3px;
33}
preview
box-decoration-break

The box-decoration-break property controls how borders, padding, and background are applied to fragmented elements — like an inline element that wraps across multiple lines, or a multi-column element.

box-decoration-break.css
CSS
1/* box-decoration-break: slice — default */
2.slice {
3 box-decoration-break: slice;
4 /* Each fragment gets its own border/padding */
5 /* Corners appear at each fragment boundary */
6}
7
8/* box-decoration-break: clone — each fragment is styled independently */
9.clone {
10 box-decoration-break: clone;
11 /* Each fragment gets full border, padding, and background */
12 /* Borders wrap each fragment individually */
13 /* Corner radii apply to each fragment */
14}
15
16/* Practical example: highlighted inline text */
17.highlight-text {
18 background: rgba(0, 255, 65, 0.1);
19 border: 1px solid rgba(0, 255, 65, 0.3);
20 border-radius: 4px;
21 padding: 2px 4px;
22 box-decoration-break: clone;
23 /* Each wrapped line gets its own full border and padding */
24}
ℹ

info

Use box-decoration-break: clone when styling inline elements that wrap across lines. Without it, the border and padding only appear at the start and end of the entire element, leaving the wrapped middle section unstyled.
Rounded Corners & Terminal Theme

The terminal theme uses specific border patterns to create its distinctive look. Subtle borders, glow effects, and precise border-radius values combine to create the developer-focused aesthetic.

terminal-borders.css
CSS
1/* Terminal theme border patterns */
2
3/* Standard terminal card */
4.terminal-card {
5 border: 1px solid #222222;
6 border-radius: 8px;
7 background: #0D0D0D;
8}
9
10/* Terminal accent card (green border) */
11.terminal-accent {
12 border: 1px solid rgba(0, 255, 65, 0.25);
13 border-radius: 8px;
14 background: #0D0D0D;
15}
16
17/* Terminal input field */
18.terminal-input {
19 border: 1px solid #333333;
20 border-radius: 4px;
21 background: #0A0A0A;
22 color: #E0E0E0;
23}
24.terminal-input:focus {
25 border-color: #00FF41;
26 outline: none;
27 box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.3);
28}
29
30/* Terminal button */
31.terminal-button {
32 border: 1px solid #00FF41;
33 border-radius: 4px;
34 color: #00FF41;
35 background: transparent;
36 transition: all 0.15s ease;
37}
38.terminal-button:hover {
39 background: rgba(0, 255, 65, 0.1);
40}
41
42/* Glow effect border */
43.terminal-glow {
44 border: 1px solid rgba(0, 255, 65, 0.3);
45 border-radius: 8px;
46 box-shadow: 0 0 12px rgba(0, 255, 65, 0.08);
47}
48
49/* Section divider */
50.section-divider {
51 border-bottom: 1px solid #222222;
52}
53
54/* Code block border */
55.code-block {
56 border: 1px solid #1A1A1A;
57 border-radius: 6px;
58 background: #0A0A0A;
59}
preview
← PreviousMargins & Padding
Next →Colors
$Blueprint — Engineering Documentation·Section ID: CSS-09·Revision: 1.0
Follow