fix border issue (#2074)

* fix border issue

* add PR to changelog

CHANGELOG.md

@@ -11,7 +11,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - Dropped "loading-indicator--dot" component style from LoadingIndicator https://github.com/Textualize/textual/pull/2050
 
-## Unreleased
+### Fixed
+
+- Fixed borders not rendering correctly. https://github.com/Textualize/textual/pull/2074
 
 ### Changed
 

src/textual/dom.py

@@ -609,9 +609,8 @@ class DOMNode(MessagePump):
         base_background = background = BLACK
         for node in reversed(self.ancestors_with_self):
             styles = node.styles
-            if styles.has_rule("background"):
+            base_background = background
-                base_background = background
+            background += styles.background
-                background += styles.background
         return (base_background, background)
 
     @property
@@ -621,9 +620,8 @@ class DOMNode(MessagePump):
         base_color = color = BLACK
         for node in reversed(self.ancestors_with_self):
             styles = node.styles
-            if styles.has_rule("background"):
+            base_background = background
-                base_background = background
+            background += styles.background
-                background += styles.background
             if styles.has_rule("color"):
                 base_color = color
                 if styles.auto_color:

tests/snapshot_tests/snapshot_apps/border_alpha.py

@@ -1,43 +1,40 @@
 from textual.app import App, ComposeResult
-from textual.containers import Grid
+from textual.containers import Vertical
-from textual.widget import Widget
+from textual.widgets import Label
+
 
 class BorderAlphaApp(App[None]):
-
+    CSS = """   
-    CSS = """
+    .boxes {
-    Grid {
+        height: 3;
-        height: 100%;
         width: 100%;
-        grid-size: 2 2;
     }
-
+    
-    #b00 { border: 0%; }
+    #box0 {
-    #b01 { border: 33%; }
+        border: heavy green 0%;
-    #b02 { border: 66%; }
+    }
-    #b03 { border: 100%; }
+    #box1 {
-
+        border: heavy green 20%;
-    #b10 { border: solid 0%; }
+    }
-    #b11 { border: dashed 33%; }
+    #box2 {
-    #b12 { border: round 66%; }
+        border: heavy green 40%;
-    #b13 { border: ascii 100%; }
+    }
-
+    #box3 {
-    #b20 { border: 0% red; }
+        border: heavy green 60%;
-    #b21 { border: 33% orange; }
+    }
-    #b22 { border: 66% green; }
+    #box4 {
-    #b23 { border: 100% blue; }
+        border: heavy green 80%;
-
+    }
-    #b30 { border: solid 0% red; }
+    #box5 {
-    #b31 { border: dashed 33% orange; }
+        border: heavy green 100%;
-    #b32 { border: round 66% green; }
+    }        
-    #b33 { border: ascii 100% blue; }
     """
 
-    def compose( self ) -> ComposeResult:
+    def compose(self) -> ComposeResult:
-        with Grid():
+        with Vertical():
-            for outer in range(4):
+            for box in range(6):
-                with Grid():
+                yield Label(id=f"box{box}", classes="boxes")
-                    for inner in range(4):
+
-                        yield Widget(id=f"b{outer}{inner}")
 
 if __name__ == "__main__":
     BorderAlphaApp().run()