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

1<article class="card">
2  <h2>Aurora</h2>
3  <p>A calm place to read and build.</p>
4  <button>Open</button>
5</article>

styles.cssCSS

1.card {
2  max-width: 320px;
3  padding: 24px;
4  border-radius: 16px;
5  background: #11151c;
6  color: #e7ecf3;
7  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
8}
9.card button {
10  margin-top: 12px;
11  padding: 8px 16px;
12  border-radius: 9px;
13  border: 1px solid #2b3340;
14  background: #1b2230;
15  color: inherit;
16}