Borders independently: border_top, border_right, border_bottom, border_left

ipywidgets/widgets/widget_layout.py

@@ -37,8 +37,11 @@ class Layout(Widget):
         'baseline', 'stretch'] + CSS_PROPERTIES, allow_none=True, help="The align-items CSS attribute.").tag(sync=True)
     align_self = CaselessStrEnum(['auto', 'flex-start', 'flex-end',
         'center', 'baseline', 'stretch'] + CSS_PROPERTIES, allow_none=True, help="The align-self CSS attribute.").tag(sync=True)
+    border_top = Unicode(None, allow_none=True, help="The border top CSS attribute.").tag(sync=True)
+    border_right = Unicode(None, allow_none=True, help="The border right CSS attribute.").tag(sync=True)
+    border_bottom = Unicode(None, allow_none=True, help="The border bottom CSS attribute.").tag(sync=True)
+    border_left = Unicode(None, allow_none=True, help="The border left CSS attribute.").tag(sync=True)
     bottom = Unicode(None, allow_none=True, help="The bottom CSS attribute.").tag(sync=True)
-    border = Unicode(None, allow_none=True, help="The border CSS attribute.").tag(sync=True)
     display = Unicode(None, allow_none=True, help="The display CSS attribute.").tag(sync=True)
     flex = Unicode(None, allow_none=True, help="The flex CSS attribute.").tag(sync=True)
     flex_flow = Unicode(None, allow_none=True, help="The flex-flow CSS attribute.").tag(sync=True)
@@ -75,6 +78,30 @@ class Layout(Widget):
     grid_column = Unicode(None, allow_none=True, help="The grid-column CSS attribute.").tag(sync=True)
     grid_area = Unicode(None, allow_none=True, help="The grid-area CSS attribute.").tag(sync=True)
 
+    def _get_border(self):
+        """
+        `border` property getter. Return the common value of all side
+        borders if they are identical. Otherwise return None.
+
+        """
+        found = None
+        for side in ['top', 'right', 'bottom', 'left']:
+            if not hasattr(self, "border_" + side):
+                return
+            old, found = found, getattr(self, "border_" + side)
+            if found is None or (old is not None and found != old):
+                return
+        return found
+
+    def _set_border(self, border):
+        """
+        `border` property setter. Set all 4 sides to `border` string.
+        """
+        for side in ['top', 'right', 'bottom', 'left']:
+            setattr(self, "border_" + side, border)
+
+    border = property(_get_border, _set_border)
+
 
 class LayoutTraitType(Instance):
 

packages/base/src/widget_layout.ts

@@ -12,7 +12,10 @@ const css_properties: Dict<string | null> = {
   align_content: null,
   align_items: null,
   align_self: null,
-  border: null,
+  border_top: null,
+  border_right: null,
+  border_bottom: null,
+  border_left: null,
   bottom: null,
   display: null,
   flex: null,

packages/html-manager/src/libembed-amd.ts

@@ -10,8 +10,7 @@ let onlyCDN = false;
 const scripts = document.getElementsByTagName('script');
 Array.prototype.forEach.call(scripts, (script: HTMLScriptElement) => {
   cdn = script.getAttribute('data-jupyter-widgets-cdn') || cdn;
-  onlyCDN =
-    onlyCDN || script.hasAttribute('data-jupyter-widgets-cdn-only');
+  onlyCDN = onlyCDN || script.hasAttribute('data-jupyter-widgets-cdn-only');
 });
 
 /**