CSS Checkerboard Background... But With Rounded Corners and Hover Styles

Creating a simple checkered background with CSS is straightforward. However, achieving rounded corners without resorting to complex CSS gradients can be challenging. This article presents a creative solution using a clever trick with SVG glyphs.

Initially, I struggled to round the corners of a basic checkered pattern. Then, I remembered the versatility of the bullet point glyph (✦) and realized that overlaying it on each intersection could create the desired rounded effect.

Let's begin with the fundamental checkered pattern:

<div></div>

div {
  background: 
    repeating-linear-gradient(
      to right, transparent, 
      transparent 50px, 
      white 50px, 
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,  
      transparent 50px, 
      white 50px, 
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

This code generates a repeating pattern of squares, transitioning from pink to skyblue, with 5px white gaps. The repeating-linear-gradient function creates horizontal and vertical white stripes, which, when layered, form the checkerboard. The third gradient provides the color fill.

To add the rounded corners, we overlay the bullet point glyph using an encoded SVG:

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg xml,<svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color: white; font-size: 35px" xmlns="http://www.w3.org/1999/xhtml">✦</div></foreignobject></svg>"), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

The repeat keyword indicates a repeating background image. left -17px top -22px/55px 55px sets the position and size of each repeating unit, carefully offset to align with the grid intersections. The SVG contains an HTML <div> element displaying the glyph; its <code>font-size directly influences the square's corner radius. The expanded SVG looks like this:

<svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color:white;font-size:35px" xmlns="http://www.w3.org/1999/xhtml">✦</div></foreignobject></svg>

Finally, let's add a hover effect:

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

This removes the glyph on hover and makes the white lines semi-transparent using rgb() with alpha transparency. A box-shadow adds a subtle effect.

This technique provides a creative and effective way to achieve a rounded-corner checkerboard pattern with CSS, offering flexibility for various interactive styles. I welcome alternative approaches in the comments!