diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte
index d36e3db..90b99b9 100644
--- a/src/lib/BackgroundGrid.svelte
+++ b/src/lib/BackgroundGrid.svelte
@@ -16,6 +16,8 @@
 	let verticalMargin = MARGIN_SIZE;
 	let unloaded = true;
 
+	let transparent = false;
+
 	function updateCounts() {
 		const gridWidth = window.innerWidth - MARGIN_SIZE;
 		const gridHeight = window.innerHeight - MARGIN_SIZE;
@@ -69,11 +71,11 @@
 <div
 	class="background"
 	class:unloaded
+	class:transparent
 	class:even-vertical={verticalCount % 2 === 0}
 	style="--horizontal-count: {horizontalCount};
 					 --vertical-count: {verticalCount};
 					 --block-size: {blockSize}px;
-					 --corner-blocks: {cornerBlocks};
 					 --horizontal-margin: {horizontalMargin}px;
 					 --vertical-margin: {verticalMargin}px;"
 >
@@ -86,15 +88,21 @@
 	<div class="edges">
 		{#each ['top', 'bottom'] as edge}
 			<div class="edge {edge}">
-				{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _}
-					<div class="block"></div>
+				{#each [...Array(horizontalCount).keys()] as n}
+					<div
+						class="block"
+						class:corner-block={n < cornerBlocks || n >= horizontalCount - cornerBlocks}
+					></div>
 				{/each}
 			</div>
 		{/each}
 		{#each ['left', 'right'] as edge}
 			<div class="edge {edge}">
-				{#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _}
-					<div class="block"></div>
+				{#each [...Array(verticalCount).keys()] as n}
+					<div
+						class="block"
+						class:corner-block={n < cornerBlocks || n >= verticalCount - cornerBlocks}
+					></div>
 				{/each}
 			</div>
 		{/each}
@@ -121,8 +129,6 @@
 		pointer-events: none;
 
 		--corner-color: white;
-		--corner-height: calc(var(--vertical-margin) + var(--corner-blocks) * var(--block-size));
-		--corner-width: calc(var(--horizontal-margin) + var(--corner-blocks) * var(--block-size));
 	}
 
 	.corner {
@@ -131,19 +137,19 @@
 		position: absolute;
 		&.top {
 			top: 0;
-			height: var(--corner-height);
+			height: var(--vertical-margin);
 		}
 		&.bottom {
 			bottom: 0;
-			height: var(--corner-height);
+			height: var(--vertical-margin);
 		}
 		&.left {
 			left: 0;
-			width: var(--corner-width);
+			width: var(--horizontal-margin);
 		}
 		&.right {
 			right: 0;
-			width: var(--corner-width);
+			width: var(--horizontal-margin);
 		}
 	}
 
@@ -163,9 +169,14 @@
 
 		& .top,
 		& .bottom {
-			width: calc(100vw - var(--corner-width) * 2);
+			width: calc(100vw - var(--horizontal-margin) * 2);
 			height: calc(var(--margin-size) * 2);
-			left: var(--corner-width);
+			left: var(--horizontal-margin);
+
+			& .block {
+				width: var(--block-size);
+				height: var(--vertical-margin);
+			}
 		}
 
 		& .left {
@@ -179,27 +190,79 @@
 		& .left,
 		& .right {
 			flex-direction: column;
-			height: calc(100vh - var(--corner-height) * 2);
+			height: calc(100vh - var(--vertical-margin) * 2);
 			width: calc(var(--margin-size) * 2);
-			top: var(--corner-height);
+			top: var(--vertical-margin);
+
+			& .block {
+				width: var(--horizontal-margin);
+				height: var(--block-size);
+			}
 		}
 
 		& .block {
 			display: inline-block;
-			height: var(--block-size);
-			width: var(--block-size);
 
-			background: white;
+			background: black;
 			&:nth-child(odd) {
-				background: black;
+				background: white;
+			}
+
+			&.corner-block {
+				background: white;
 			}
 		}
 	}
 
-	.background.even-vertical .edges .right .block {
-		background: black;
+	.block,
+	.corner {
+		transition: background 1s;
+	}
+
+	.background.even-vertical .edges .right .block:not(.corner-block) {
+		background: white;
 		&:nth-child(odd) {
-			background: white;
+			background: black;
+		}
+	}
+
+	.background.transparent {
+		& .block {
+			background: transparent !important;
+		}
+
+		& .edge {
+			&.top .block {
+				border-right: 1px solid gray;
+				&:first-child {
+					border-left: 1px solid gray;
+				}
+			}
+
+			&.bottom .block {
+				border-right: 1px solid gray;
+				&:first-child {
+					border-left: 1px solid gray;
+				}
+			}
+
+			&.left .block {
+				border-bottom: 1px solid gray;
+				&:first-child {
+					border-top: 1px solid gray;
+				}
+			}
+
+			&.right .block {
+				border-bottom: 1px solid gray;
+				&:first-child {
+					border-top: 1px solid gray;
+				}
+			}
+		}
+
+		& .corner {
+			background: transparent !important;
 		}
 	}