Add panel Border type to docs (#4035)

* Add panel Border type to docs

* Add panel border description
* Add Label with panel border to Grid
* Add style for panel id and change grid-size from 3 5 to 4 4

issues #3978

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

docs/css_types/border.md

@@ -18,6 +18,7 @@ The [`<border>`](./border.md) type can take any of the following values:
 | `inner`     | Thick solid border.                                      |
 | `none`      | Disabled border.                                         |
 | `outer`     | Solid border with additional space around content.       |
+| `panel`     | Solid border with thick top.                             |
 | `round`     | Rounded corners.                                         |
 | `solid`     | Solid border.                                            |
 | `tall`      | Solid border with additional space top and bottom.       |

docs/examples/styles/border_all.py

@@ -17,6 +17,7 @@ class AllBordersApp(App):
             Label("hkey", id="hkey"),
             Label("inner", id="inner"),
             Label("outer", id="outer"),
+            Label("panel", id="panel"),
             Label("round", id="round"),
             Label("solid", id="solid"),
             Label("tall", id="tall"),

docs/examples/styles/border_all.tcss

@@ -34,6 +34,10 @@
     border: outer $accent;
 }
 
+#panel {
+    border: panel $accent;
+}
+
 #round {
     border: round $accent;
 }
@@ -59,7 +63,7 @@
 }
 
 Grid {
-    grid-size: 3 5;
+    grid-size: 4 4;
     align: center middle;
     grid-gutter: 1 2;
 }