diff --git a/Base/home/anon/www/borders.html b/Base/home/anon/www/borders.html
index a5b841d7dd..32447b0721 100644
--- a/Base/home/anon/www/borders.html
+++ b/Base/home/anon/www/borders.html
@@ -3,6 +3,9 @@
 <head>
 <title>CSS borders lookin' good</title>
 <style>
+div + div {
+    margin-top: 20px;
+}
 #foo {
     border-top-color: red;
     border-right-color: lime;
@@ -84,6 +87,40 @@
 #double-color-solo {
 	border: red blue;
 }
+#dotted-1px {
+    border: 1px dotted blue;
+}
+#dotted-5px {
+    border: 5px dotted blue;
+}
+#dotted-20px {
+    border: 20px dotted blue;
+}
+#dashed-1px {
+    border: 1px dashed blue;
+}
+#dashed-5px {
+    border: 5px dashed blue;
+}
+#dashed-20px {
+    border: 20px dashed blue;
+}
+#mixed {
+    border-top-width: 20px;
+    border-top-style: dashed;
+    border-top-color: red;
+
+    border-left-width: 5px;
+    border-left-style: solid;
+    border-left-color: blue;
+
+    border-bottom-width: 10px;
+    border-bottom-style: dotted;
+    border-bottom-color: lime;
+
+    border-right-width: 10px;
+    border-right-style: inset;
+}
 </style>
 </head>
 <body>
@@ -102,5 +139,12 @@
 <div id="double-width-solo">double width solo</div>
 <div id="double-style-solo">double style solo</div>
 <div id="double-color-solo">double color solo</div>
+<div id="dotted-1px">dotted (1px)</div>
+<div id="dotted-5px">dotted (5px)</div>
+<div id="dotted-20px">dotted (20px)</div>
+<div id="dashed-1px">dashed (1px)</div>
+<div id="dashed-5px">dashed (5px)</div>
+<div id="dashed-20px">dashed (20px)</div>
+<div id="mixed">mixed</div>
 </body>
 </html>
diff --git a/Libraries/LibWeb/Layout/LayoutBox.cpp b/Libraries/LibWeb/Layout/LayoutBox.cpp
index 7fe66dd9b0..e73e4900b6 100644
--- a/Libraries/LibWeb/Layout/LayoutBox.cpp
+++ b/Libraries/LibWeb/Layout/LayoutBox.cpp
@@ -106,6 +106,31 @@ void LayoutBox::paint_border(RenderingContext& context, Edge edge, const Gfx::Fl
     if (border_style.has_value()) {
         if (border_style.value()->to_string() == "dotted")
             line_style = Gfx::Painter::LineStyle::Dotted;
+        if (border_style.value()->to_string() == "dashed")
+            line_style = Gfx::Painter::LineStyle::Dashed;
+    }
+
+    if (line_style != Gfx::Painter::LineStyle::Solid) {
+        switch (edge) {
+        case Edge::Top:
+            p1.move_by(int_width / 2, int_width / 2);
+            p2.move_by(-int_width / 2, int_width / 2);
+            break;
+        case Edge::Right:
+            p1.move_by(-int_width / 2, int_width / 2);
+            p2.move_by(-int_width / 2, -int_width / 2);
+            break;
+        case Edge::Bottom:
+            p1.move_by(int_width / 2, -int_width / 2);
+            p2.move_by(-int_width / 2, -int_width / 2);
+            break;
+        case Edge::Left:
+            p1.move_by(int_width / 2, int_width / 2);
+            p2.move_by(int_width / 2, -int_width / 2);
+            break;
+        }
+        context.painter().draw_line({ (int)p1.x(), (int)p1.y() }, { (int)p2.x(), (int)p2.y() }, color, int_width, line_style);
+        return;
     }
 
     auto draw_line = [&](auto& p1, auto& p2) {
