diff --git a/src/nimib/renders.nim b/src/nimib/renders.nim
index cbcd9b79..29426b41 100644
--- a/src/nimib/renders.nim
+++ b/src/nimib/renders.nim
@@ -18,7 +18,7 @@ proc useHtmlBackend*(doc: var NbDoc) =
 {{>nbCodeOutput}}"""
   doc.partials["nbCodeSkip"] = """{{>nbCodeSource}}"""
   doc.partials["nbCapture"] = """{{>nbCodeOutput}}"""
-  doc.partials["nbCodeSource"] = "<pre><code class=\"nohighlight hljs nim\">{{&codeHighlighted}}</code></pre>"
+  doc.partials["nbCodeSource"] = """<pre class="nb-code-pre {{#output}}nb-code-pre-sharp-corner{{/output}}"><code class="nohighlight hljs nim nb-code">{{&codeHighlighted}}</code></pre>"""
   doc.partials["nbCodeOutput"] = """{{#output}}<pre class="nb-output">{{output}}</pre>{{/output}}"""
   doc.partials["nimibCode"] = doc.partials["nbCode"]
   doc.partials["nbImage"] = """<figure>
diff --git a/src/nimib/themes.nim b/src/nimib/themes.nim
index 94db5670..052f96ed 100644
--- a/src/nimib/themes.nim
+++ b/src/nimib/themes.nim
@@ -76,7 +76,35 @@ pre > code {
 }
 .nb-output {
   line-height: 1.15;
+  padding: 0.5rem;
+  margin-top: 0px;
+  border-color: #E8ECF0;
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  overflow-x: auto;
 }
+.nb-code-pre + .nb-output {
+  border-radius: 0px 0px 6px 6px;
+  border-top-style: none;
+}
+
+
+.nb-code { 
+  border-radius: inherit;
+}
+.nb-code-pre {
+  border-color: #E8ECF0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 6px 6px 6px 6px;
+  margin-bottom: 0px;
+}
+
+.nb-code-pre-sharp-corner {
+  border-radius: 6px 6px 0px 0px;
+}
+
 figure {
   margin: 2rem 0;
 }
diff --git a/tests/trenders.nim b/tests/trenders.nim
index 1341b206..13b979df 100644
--- a/tests/trenders.nim
+++ b/tests/trenders.nim
@@ -11,12 +11,12 @@ suite "render (block), html default backend":
 
   test "nbCode without output":
     nbCode: discard
-    check nb.render(nb.blk).strip == """<pre><code class="nohighlight hljs nim"><span class="hljs-keyword">discard</span></code></pre>"""
+    check nb.render(nb.blk).strip == """<pre class="nb-code-pre "><code class="nohighlight hljs nim nb-code"><span class="hljs-keyword">discard</span></code></pre>"""
 
   test "nbCode with output":
     nbCode: echo "hi"
     check nb.render(nb.blk).strip == """
-<pre><code class="nohighlight hljs nim"><span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;hi&quot;</span></code></pre><pre class="nb-output">hi</pre>"""
+<pre class="nb-code-pre nb-code-pre-sharp-corner"><code class="nohighlight hljs nim nb-code"><span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;hi&quot;</span></code></pre><pre class="nb-output">hi</pre>"""
 
 # switch to markdown backend
 useMdBackend nb