Put example outputs in first tab.

docs/styles/border.md

@@ -58,6 +58,11 @@ Alternatively, you can see the examples below.
 
 This examples shows three widgets with different border styles.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/border.py"}
+    ```
+
 === "border.py"
 
     ```python
@@ -70,15 +75,15 @@ This examples shows three widgets with different border styles.
     --8<-- "docs/examples/styles/border.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/border.py"}
-    ```
-
 ### All border types
 
 The next example shows a grid with all the available border types.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/border_all.py"}
+    ```
+
 === "border_all.py"
 
     ```py
@@ -91,11 +96,6 @@ The next example shows a grid with all the available border types.
     --8<-- "docs/examples/styles/border_all.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/border_all.py"}
-    ```
-
 ### Borders and outlines
 
 The next example makes the difference between [`border`](./border.md) and [`outline`](./outline.md) clearer by having three labels side-by-side.