Basic support for border-width in CSS API

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt

@@ -79,3 +79,30 @@ fun StyleBuilder.borderRadius(
     )
 }
 
+fun StyleBuilder.borderWidth(width: CSSNumeric) {
+    property("border-width", width)
+}
+
+fun StyleBuilder.borderWidth(topLeft: CSSNumeric, bottomRight: CSSNumeric) {
+    property("border-width", "$topLeft $bottomRight")
+}
+
+fun StyleBuilder.borderWidth(
+    topLeft: CSSNumeric,
+    topRightAndBottomLeft: CSSNumeric,
+    bottomRight: CSSNumeric
+) {
+    property("border-width", "$topLeft $topRightAndBottomLeft $bottomRight")
+}
+
+fun StyleBuilder.borderWidth(
+    topLeft: CSSNumeric,
+    topRight: CSSNumeric,
+    bottomRight: CSSNumeric,
+    bottomLeft: CSSNumeric
+) {
+    property(
+        "border-width",
+        "$topLeft $topRight $bottomRight $bottomLeft"
+    )
+}

web/core/src/jsTest/kotlin/StaticComposableTests.kt

@@ -253,51 +253,6 @@ class StaticComposableTests {
         assertEquals("flex-shrink: 0.6;", (root.children[3] as HTMLElement).style.cssText)
     }
 
-    @Test
-    fun stylesBorderRadius() {
-        val root = "div".asHtmlElement()
-        renderComposable(
-            root = root
-        ) {
-            Div(
-                {
-                    style {
-                        borderRadius(3.px)
-                    }
-                }
-            )
-            Div(
-                {
-                    style {
-                        borderRadius(3.px, 5.px)
-                    }
-                }
-            )
-            Div(
-                {
-                    style {
-                        borderRadius(3.px, 5.px, 4.px)
-                    }
-                }
-            )
-            Div(
-                {
-                    style {
-                        borderRadius(3.px, 5.px, 4.px, 1.px)
-                    }
-                }
-            )
-        }
-
-        assertEquals("border-radius: 3px;", (root.children[0] as HTMLElement).style.cssText)
-        assertEquals("border-radius: 3px 5px;", (root.children[1] as HTMLElement).style.cssText)
-        assertEquals("border-radius: 3px 5px 4px;", (root.children[2] as HTMLElement).style.cssText)
-        assertEquals(
-            "border-radius: 3px 5px 4px 1px;",
-            (root.children[3] as HTMLElement).style.cssText
-        )
-    }
-
     @Test
     fun stylesTop() {
         val root = "div".asHtmlElement()

web/core/src/jsTest/kotlin/css/CSSBorderTests.kt

@@ -0,0 +1,106 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.core.tests.css
+
+import org.jetbrains.compose.web.core.tests.runTest
+import org.jetbrains.compose.web.css.borderRadius
+import org.jetbrains.compose.web.css.borderWidth
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.get
+import kotlin.test.Test
+import kotlin.test.assertEquals
+
+class CSSBorderTests {
+
+    @Test
+    fun borderRadius() = runTest {
+        composition {
+            Div(
+                {
+                    style {
+                        borderRadius(3.px)
+                    }
+                }
+            )
+            Div(
+                {
+                    style {
+                        borderRadius(3.px, 5.px)
+                    }
+                }
+            )
+            Div(
+                {
+                    style {
+                        borderRadius(3.px, 5.px, 4.px)
+                    }
+                }
+            )
+            Div(
+                {
+                    style {
+                        borderRadius(3.px, 5.px, 4.px, 1.px)
+                    }
+                }
+            )
+        }
+
+        assertEquals("3px", (root.children[0] as HTMLElement).style.borderRadius)
+        assertEquals("3px 5px", (root.children[1] as HTMLElement).style.borderRadius)
+        assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderRadius)
+        assertEquals(
+            "3px 5px 4px 1px",
+            (root.children[3] as HTMLElement).style.borderRadius    
+        )
+    }
+
+
+    @Test
+    fun borderWidth() = runTest {
+        composition {
+            Div(
+                {
+                    style {
+                        borderWidth(2.px)
+                    }
+                }
+            )
+            Div(
+                {
+                    style {
+                        borderWidth(3.px, 7.px)
+                    }
+                }
+            )
+            Div(
+                {
+                    style {
+                        borderWidth(3.px, 5.px, 4.px)
+                    }
+                }
+            )
+            Div(
+                {
+                    style {
+                        borderWidth(3.px, 5.px, 4.px, 2.px)
+                    }
+                }
+            )
+        }
+
+        assertEquals("2px", (root.children[0] as HTMLElement).style.borderWidth)
+        assertEquals("3px 7px", (root.children[1] as HTMLElement).style.borderWidth)
+        assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderWidth)
+        assertEquals(
+            "3px 5px 4px 2px",
+            (root.children[3] as HTMLElement).style.borderWidth
+        )
+    }
+
+
+}