Add Border to Elements

You can add lines to the outer edges of elements and bevel their corners. You can easily create Border structure in elements by following the steps below:

  1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.
  2. Then click on the “UI Design” module.
  1. Drag and drop an element from the “Elements” panel on the left side.
  2. Click on an element on the screen to make it selected.
  3. Open the Styling panel for the selected element.
  1. Find the Border option and expand this area.
  2. Click the ellipsis icon in the Styles area.
    • Click Add New Style in the menu that opens.
    • You can save the Border style you created and reuse it in different elements or screens.
  3. Select the color you want with the Color option in the Custom Style section.
    • You can use hex code, RGB value or Color Picker for color selection.
  4. The Width option allows you to set the border thickness in pixels (px).
    • You can enter individual values for each border (Top, Bottom, Right, Left).
    • Alternatively, you can set the same thickness for all edges with a single click by activating the lock icon.
  5. With the Radius option you can round the border corners.
    • You can enter the same value for all corners or specify a separate value for each corner.
  6. The properties in Border may vary depending on the element type selected.

Some elements support all Border properties, while some elements support limited properties.

By following these steps, you can easily add and customize borders in your designs.