CSS Tutorial
CSS Borders
A border has width, style, and color. You can set one side or all four.
Width, style, and color
A border is a line around the padding box. It has three parts: how thick, which stroke, and which color. You can set them as border-width, border-style, and border-color, or as one shorthand.
Style is required. Width and color have defaults, but a border with no style is not drawn. Start withsolid until you need a dash or a double line.
Example
<style>
h1 {
color: teal;
}
.card {
border-width: 3px;
border-style: solid;
border-color: #0284c7;
padding: 0.75rem 1rem;
color: #0c4a6e;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="card">Open 8–16.</p>
<p>The hours sit in a sky frame.</p>Style values
solid is a full line. dashed and dotted break it.double draws two lines whose total thickness is the width. none andhidden remove the stroke. Groove, ridge, inset, and outset exist; they look dated on a flat studio site.
| Style | Looks like |
|---|---|
solid | One continuous line |
dashed | Short segments |
dotted | Dots |
double | Two parallel lines |
none | No border |
Change solid to dashed in the first example’s preview to see the stroke break. Keep solid for cards and buttons unless a sketch or a draft needs a lighter mark.
One side at a time
border-top, border-right, border-bottom, andborder-left set a single edge. A left accent bar is a common studio pattern: a thick left border, no stroke on the other three sides.
Example
<style>
h1 {
color: teal;
}
.note {
border-left: 4px solid #0284c7;
background: #f0f9ff;
padding: 0.75rem 1rem;
color: #0c4a6e;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="note">Open 8–16. The tide gate closes at 18:00.</p>Longhands also exist per side and per part: border-top-width, border-left-color. Reach for them when one edge needs a different thickness, not as a default habit.
The border shorthand
border: 2px solid teal; sets width, style, and color on all four sides at once. Order is flexible; style still has to be there. After a shorthand, a per-side rule can override one edge.
Example
<style>
h1 {
color: teal;
}
.card {
border: 2px solid #0284c7;
border-bottom: 6px solid teal;
padding: 0.75rem 1rem;
color: #0c4a6e;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="card">Open 8–16. Sky on three sides, a thicker teal base.</p>Click Try it in CSS and change the base from 6px to 2px. The preview lives at /css/try.
A first look at radius
border-radius rounds the corners of the border (and the background). One value rounds all four corners. It is not a fifth border part — it is a separate property. Therounded corners chapter covers pills, circles, and four-value lists.
Example
<style>
h1 {
color: teal;
}
.card {
border: 2px solid #0284c7;
border-radius: 0.75rem;
padding: 0.75rem 1rem;
color: #0c4a6e;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="card">Open 8–16.</p>Radius clips the border’s corners. A 3px solid line with border-radius: 0.75rem is the usual card look on these pages. Next: space outside that line — margin.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Biology
A left rule on a warning
A border has width, style, and colour. border-left: 4px solid is the usual callout: one accent edge, not a full box that fights the text.
dashed can mean “draft” or “ticket”. Do not mix three styles on one card without a reason.
Example
<style>
.fever {
border-left: 4px solid #9f1239;
padding-left: 0.7rem;
}
</style>
<p class="fever">38.4 °C oral — fever</p>Chemistry
A bottle card with a full border
2px solid is a label edge. It is not the chemical. Keep the formula in the text so a printout in grey still works.
Example
<style>
.bottle { border: 2px solid #166534; padding: 0.7rem; }
</style>
<p class="bottle">CuSO4·5H2O</p>