Kubio – the kickstart

Find out how you can use Kubio for designing the website you envision.

How to customize borders and shadows

You can customize borders and shadows for your sections, columns, and block inside the “Style” and “Advanced” options in the editing panel.

There are several border types that you can choose from. 

You can assign a certain thickness in pixels to your border. For example, you can set up the same thickness for top, bottom, left, and right in pixels (PX), or you can assign different values if you select the link symbol. In the example below, I give 2 pixels for the top and bottom borders and purple color.

You can always go back to the initial setting if you hit the reset button.

You can also add a shadow to the certain blocks. You can do this after you toggle on “Box shadow.” A box-shadow is described by X and Y offsets relative to the element, blur, color, and spread radius.

A positive horizontal offset (X) of the shadow means the shadow will be on the right of the box; a negative offset will put the shadow on the left of the box. A negative vertical offset (Y) of the shadow means that the box-shadow will be above the box, a positive one means the shadow will be below the box.

The spread can have both positive and negative values. Positive values increase the size of the shadow; negative values decrease the size. The default is 0, meaning that the shadow is the same size as the blur. 

In the blur case, the higher the number set, the higher the blur. When the blur is set to 0, it means there’s no blur.

If you toggle the inset option on, you can apply the shadow to the inside of the paragraph block.

If you want to make color changes to the box shadow, select the colored circle next to the “Spread” option.

It will open up the exact options you found when styling shadows, backgrounds, or text colors.

You can pick a color from there, use the slider, or just type in your desired color code in the “HEX” field. Then, you can switch to the RGB color mode if it suits you better from the dropdown arrow. 

You can also adjust the opacity for the color of your box-shadow. The slider offers you values from 0 to 1, 1, meaning there’s no transparency.