TutorialsPreview
ReferenceReferencebeginner4 min

CSS card — reference

The exact properties used, answer-first.

You will learn

The signature and one-line purpose of each property in play.

Prerequisites

None — this is a lookup surface.

border-radius
.card { border-radius: 16px; }
Rounds the corners by 16px.
box-shadow
.card { box-shadow: 0 12px 40px rgb(0 0 0 / 0.45); }
Soft drop shadow: x=0, y=12px, blur=40px, 45% black.
project · css-card Open in Code
index.htmlHTML
<article class="card">
<h2>Aurora</h2>
<p>A calm place to read and build.</p>
<button>Open</button>
</article>
styles.cssCSS
.card {
max-width: 320px;
padding: 24px;
border-radius: 16px;
background: #11151c;
color: #e7ecf3;
box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
}
.card button {
margin-top: 12px;
padding: 8px 16px;
border-radius: 9px;
border: 1px solid #2b3340;
background: #1b2230;
color: inherit;
}
See every property together in the live project

Concepts covered · 1

More like this

H
Reference·beginner·8 min

HTML Headings

h1 through h6 are the page’s table of contents. Use them for structure, never for size — that’s what CSS is for.

H
Reference·intermediate·18 min

HTML Headings

h1–h6 are instances of HTMLHeadingElement. They take no special attributes — only the global set and ARIA — but there’s real depth in how they form the document outline and what you can do with them from JavaScript.

H
Reference·beginner·2 min

HTML Headings

Headings, distilled to what you must remember.

Liked this one?

Pass it on

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

Sign in to ask a question privately on this tutorial.

Sign in

No pinned answers yet for this tutorial.