---
category: Display
created: '2020-01-16'
description: Create stamp border with CSS
keywords: css radial gradient, css stamp border
thumbnail: /assets/css-layout/thumbnails/stamp-border.png
title: Stamp border
---

## HTML

```html index.html
<div class="stamp-border">
    <div class="stamp-border__content"></div>
</div>
```

## CSS

```css styles.css
.stamp-border {
    /* Background */
    background-color: #d1d5db;
    background-image: radial-gradient(#fff 50%, transparent 50%);
    background-position: -0.25rem -0.25rem;
    background-repeat: repeat;
    background-size: 0.5rem 0.5rem;

    /* Spacing */
    padding: 0.25rem;
}

.stamp-border__content {
    /* Background */
    background-color: #d1d5db;

    height: 100%;
    width: 100%;
}
```

<Playground>
```css styles.css hidden
body {
    height: 24rem;
}
.stamp-border {
    /* Background */
    background-color: #d1d5db;
    background-image: radial-gradient(#fff 50%, transparent 50%);
    background-position: -0.25rem -0.25rem;
    background-repeat: repeat;
    background-size: 0.5rem 0.5rem;

    /* Spacing */
    padding: 0.25rem;

    /* Demo */
    height: 100%;
    width: 100%;
}

.stamp-border__content {
    /* Background */
    background-color: #d1d5db;

    height: 100%;
    width: 100%;
}
```

```html index.html hidden
<div class="stamp-border">
    <div class="stamp-border__content"></div>
</div>
```
</Playground>