Customizing border
Elaine Bondoc avatar
Written by Elaine Bondoc
Updated over a week ago

Border, or borderlines, refer to the visual boundaries or outlines used to separate and distinguish elements like the parts of your microsite (headers, navigation menus, footer area), section types (grid, text, accordion) containers (overlays, previewers), buttons, etc.

Different properties can be customized in CSS to better use the borders of the different elements on your site:

Border Color

This property sets the color of the border. You can specify a color name (e.g., "red"), a hexadecimal value (e.g., "#FF0000"), an RGB value (e.g., "rgb(255, 0, 0)"), or other color representations.

Border Width

This property sets the thickness or width of the borderline. You can use pixel values (e.g., "2px"), em units, percentage values, or other valid CSS length units.

Border Style

This property defines the style of the borderline, such as solid, dashed, dotted, double, groove, ridge, inset, outset, or none. The style determines the appearance of the borderline.

Border Radius

This property allows you to create rounded corners for the border. By specifying a radius value, you can give the border a curved appearance. This property is particularly useful for creating aesthetically pleasing designs.

.custom-border {
border: 2px solid #000000;
border-radius: 5px;

In the example above, the element with the class "custom-border" will have a black solid border with a width of 2 pixels and a border radius of 5 pixels.

Borders can be customized further by adjusting the color, width, style, and radius values according to the design requirements of your site.

You may also refer to our CSS Wiki page for more border tile options.

Did this answer your question?