HTextField: support radius, have a fancier border

src/gui/Base/HRectangleBottomBorder.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.12
+
+Item {
+    id: root
+
+    property Rectangle rectangle: parent
+    property alias borderHeight: clipArea.height
+    property alias color: borderRectangle.color
+
+    implicitWidth: rectangle.width
+    implicitHeight: rectangle.height
+
+    Item {
+        id: clipArea
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: 0
+        clip: true
+
+        Rectangle {
+            id: borderRectangle
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: root.height
+            radius: rectangle.radius
+        }
+    }
+}

src/gui/Base/HTextField.qml

@@ -24,11 +24,27 @@ TextField {
 
     background: Rectangle {
         id: textFieldBackground
+        radius: theme.radius
         color: field.activeFocus ? focusedBackgroundColor : backgroundColor
-        border.color: error ? errorBorder :
+
-                      field.activeFocus ? focusedBorderColor : borderColor
         border.width: bordered ? theme.controls.textField.borderWidth : 0
-        radius: bordered ? theme.radius : 0
+        border.color: borderColor
+
+        HRectangleBottomBorder {
+            id: bottomBorder
+            borderHeight: theme.controls.textField.borderWidth
+            color: error ? errorBorder : focusedBorderColor
+
+            transform: Scale {
+                origin.x: bottomBorder.width / 2
+                origin.y: bottomBorder.height / 2
+                xScale: field.activeFocus ? 1 : 0
+
+                Behavior on xScale { HNumberAnimation {} }
+            }
+
+            Behavior on color { HColorAnimation {} }
+        }
     }
 
     // Set it only on component creation to avoid binding loops