Kuika's Border features give your designs a professional look. You can add lines around elements and easily customize their properties. You can create an aesthetic design by adjusting the color, thickness, type and corner bevels of the borders. You can also save the Border styles you create and reuse them on different screens or elements.
Custom Style
Custom Style is the area for creating and editing a custom border style for an element. There are four basic properties in this panel:
Color:
Determines the border color and opacity.
You can choose a color using a hex code (e.g. #FF5733), RGB values (e.g. rgb(255, 87, 51)), or the Color Picker.
Width:
You can set the border thickness in pixels (px).
You can enter separate values for each border: Top, Bottom, Right, Left.
All edges can be assigned the same thickness by activating the lock icon.
Radius (Corner Bevels):
You can adjust the corner bevels to make the edges rounded.
You can apply equal rounding to all corners by entering a single value or specify separate values for each corner (e.g. 10px 15px 20px 5px).
Style:
Specifies the border line type:
Solid: Continuous straight line
Dashed: Intermittent dashed lines
Dotted: Line of small dots
Managing Border Styles
Load Style: You can easily apply a saved Custom Style to another element.
Edit: You can update an existing style.
Duplicate: You can create a copy of an existing style and make changes to it.
Delete: You can remove styles you no longer need.
Add Border to Elements
Log in to the Kuika platform and select your project from the Apps screen.
Click on the UI Design module.
Drag and drop an element from the Elements panel.
After selecting the element, open the Styling panel.
Expand the Border option.
Click the ellipsis icon in the Styles area.
Select Add New Style and create a new style.
In the Custom Style section, adjust the color, thickness, corner bevel and style settings.
Click the CREATE button to complete the process.
Important Notes
Some elements support all Border properties, while others support only certain properties.
Border properties may vary depending on the element type and intended use.
By following these steps, you can quickly and efficiently add and customize borders in your app.