diff --git a/src/components/PivotMarker.css b/src/components/PivotMarker.css
new file mode 100644
index 0000000..464a1fa
--- /dev/null
+++ b/src/components/PivotMarker.css
@@ -0,0 +1,11 @@
+.border {
+  height: 2px;
+  background: black;
+}
+
+.marker {
+  height: 6px;
+  width: 2px;
+  background: black;
+  margin: 0 auto;
+}
diff --git a/src/components/PivotMarker.js b/src/components/PivotMarker.js
index 2d38e6e..1597a69 100644
--- a/src/components/PivotMarker.js
+++ b/src/components/PivotMarker.js
@@ -1,11 +1,21 @@
 import React from 'react'
 
-export const PipeMarker = ({ children }) => {
-  return (
-    <div>
-      <div style={{ textAlign: 'center' }}>|</div>
-      {children}
-      <div style={{ textAlign: 'center' }}>|</div>
-    </div>
-  )
-}
+import styles from './PivotMarker.css'
+
+export const PipeMarker = ({ children }) => (
+  <div>
+    <div style={{ textAlign: 'center' }}>|</div>
+    {children}
+    <div style={{ textAlign: 'center' }}>|</div>
+  </div>
+)
+
+export const BorderMarker = ({ children }) => (
+  <div>
+    <div className={styles.border}></div>
+    <div className={styles.marker}></div>
+    {children}
+    <div className={styles.marker}></div>
+    <div className={styles.border}></div>
+  </div>
+)