Border

With Kuika's Border features, you can give your designs a professional look. You can add lines to the outer edges and easily customize the properties of these lines. You can increase the aesthetics of your design by specifying the color, thickness, type and corner bevels of the border lines you add around an element in detail.

Kuika also allows you to save the Border styles you create and reuse them on different screens or on the same screen. Thus, you can make your design processes more efficient. You can edit, duplicate or delete your saved Border styles at any time. Kuika's Border features make it easy to provide both flexibility and consistency in your designs. In this tutorial you will learn how to give your designs and elements a professional look using Border.

Custom Style

Custom Style is the area for creating and editing a custom border style for an element. This panel provides four basic properties to fully customize border settings: Color, Width, Radius and Style.

Color

Allows you to choose the border color and opacity. You can use the following methods to specify a color:

• Entering a hex code: For example, #FF5733.
• Enter RGB values: For example, rgb(255, 87, 51).
• Color Picker: You can select a color using a visual tool.

Width

This is the field where you can set the thickness of the border. It is possible to set different thickness values for different borders:

• Top: Top edge thickness.
• Bottom: Bottom edge thickness.
• Right: Right edge thickness.
• Left (Left): Left edge thickness.
• With this property, you can create symmetrical or asymmetrical borders. For example, if you only want to add top and bottom borders, you can leave the other fields as 0.

Radius

Corner bevels are used to smooth the corners of edges. You can specify the same rounding value for all corners or different rounding values for each corner:

• One value: Applies equal rounding to all corners. For example, 10px.
• Four different values: A separate rounding value can be entered for each corner. For example: 10px 15px 20px 5px (top-left, top-right, bottom-right, bottom-right, bottom-left respectively).

Style

This setting determines the line type of the border. You can choose one of the following options:

• Solid: An uninterrupted straight line.
• Dashed: Intermittent dashed lines.
• Dotted: A border in the form of small dots.

Load Style

You can easily apply a saved Custom Style to different elements. Ideal for quickly integrating the same design style across different screens or projects.

Manage Border Styles

You have full control over the styles you create. You can do the following actions according to your needs:

• Edit: You can update an existing style.
• Duplicate: You can duplicate an existing style and make changes to it.
• Delete: You can remove styles that you no longer need.

Thanks to Kuika's flexible structure, you can increase both consistency and speed in your designs. The Border feature is an indispensable tool for creating both visual integrity and user-friendly designs.