diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ac04b339c1..8c3c090a3d 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -198,6 +198,8 @@ section > ul li {
   padding: 39px 14px 14px;
   margin-bottom: -1px;
   border: 1px solid #ddd;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
 /* Echo out a label for the example */
 .bs-docs-example:after {
@@ -211,6 +213,8 @@ section > ul li {
   color: #9da0a4;
   background-color: #f5f5f5;
   border: 1px solid #ddd;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 /* Tweak display of the examples */
diff --git a/docs/css.html b/docs/css.html
index aba4198a91..fd6e158e4d 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -475,12 +475,13 @@ title: CSS
 
           <h3>Basic grid HTML</h3>
           <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span4"&gt;...&lt;/div&gt;
-  &lt;div class="span8"&gt;...&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+{% highlight html linenos %}
+<div class="row">
+  <div class="span8">8</div>
+  <div class="span4">4</div>
+</div>
+{% endhighlight %}
+
           <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
 
           <h2>Offsetting columns</h2>
@@ -498,12 +499,12 @@ title: CSS
               <div class="span6 offset6">6 offset 6</div>
             </div><!-- /row -->
           </div>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span4"&gt;...&lt;/div&gt;
-  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+{% highlight html linenos %}
+<div class="row">
+  <div class="span4">...</div>
+  <div class="span4 offset4">...</div>
+</div>
+{% endhighlight %}
 
 
           <h2>Nesting columns</h2>
@@ -521,17 +522,22 @@ title: CSS
               </div>
             </div>
           </div>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span9"&gt;
+{% highlight html linenos %}
+<div class="row">
+  <div class="span9">
     Level 1: 9 columns
-    &lt;div class="row"&gt;
-      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
-      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+    <div class="row">
+      <div class="span6">
+        Level 2: 6 columns
+      </div>
+      <div class="span6">
+        Level 2: 6 columns
+      </div>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
         </section>