UI Design
/
Work with interface styles

Border

Border

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:

  1. 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.
  2. 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.
  1. 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).
  1. 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.

Other Related Content

No items found.

Glossary

No items found.

Alt Başlıklar