Borders & Border Radius

Borders can be used for many different things and come with several different options. The first thing you need to know about borders is that every element, including the Grid itself, can have one. They come in a variety of styles like solid, dashed, dotted and more. Styles can also be set differently on each side of the element, so, for example, the top and bottom can have a dashed border while the right and left can have a dotted one.

Here is one example of how the use of borders will visually enhance a design. Using “The Coast” theme, adding a border to the logo sets it apart from the navigation items and gives it a powerful appearance. Compare the image on the left that has no border, to the one on the right with a solid border on all sides, to see the difference.

Quick Links

Editing a border

To get started select an element that you wish to add a border to and navigate to the Design pane, where you will find the borders section at the bottom.

Border Settings Section

Border settings are controlled by a square toggle with a circle toggle inside. Clicking on the circle selects all borders. To edit a border independently, you would need to select the corresponding toggle. When you select a border, the toggle will be highlighted, indicating that your edits will apply to that border. In this example, we have selected the left border:

Left Border toggle selected

Notice the left border toggle is highlighted, so we are ready to edit the values. If you are adding a border where all the properties are the same, you can select the circle toggle to select all the borders at once.

All Border toggles selected

Now that we know how to select and edit a border let's move onto applying some settings.

Border-Width

The border width is defined in pixels and represents the thickness the border will take on when applied to the element. This example shows different pixel widths applied to the bottom border of a container:

Examples of Border Width

Border-Style

There are several border styles that you can choose from that you can apply to any object, here is an overview:

None - Specifies no border - This is also how you disable a border once set.

One other thing you might want to know about border styles is that you can set different properties for each of the borders (top, right, bottom, left). As an example, for “The Coast” logo, you can have multiple borders set for the same element. This is accomplished by applying a double border on the left and right, and a dotted border to the top and bottom.

Multiple Borders Applied

Border Color

The border color defines which color the border will have. As with the above, you can set a color for each of the individual borders or have them all use the same by using the circle toggle.

The color selection window allows you to select the color using the built-in color slider, or by typing in the Hex, RGB or HSB. Another cool feature of the border color is that you can set an opacity. The opacity can give you a see through effect such as this:

Border Opacity

Border-radius

Rounded corners can make a design feel smoother and more appealing. When it comes to rounded corners, you can apply them to any element with the Radius control. For example take the two buttons below, they are the same font, color, size, etc. The only difference between them is the right button has a radius of 5px applied.

Examples of Buttons with and without Border Radius

As with borders, radius allows you to set different properties for each side of the element using the toggle controls. The toggles include Top-Left, Top-Right, Bottom-Right, Bottom-Left allowing you to set the x (horizontal) and y (vertical) radius of the element.

Border Settings Section

There are many different designs that you can use that are fairly simple to setup and give you some amazing effects. As an example, add a button to your design and select the Top-Left and Bottom-Right border radius and apply 5px to both the x and y properties.

Appling settings to Top Left and Bottom Right Radius

Now set the Top-Right and Bottom-Left to 20px on both x and y.

Appling settings to Top Right and Bottom Left Radius

After you have completed this you should see the following!

Completed Border Radius Button

Now that you have the rundown on what a border and border radius are, and how to use them, go out and give them a spin. We recommend when you do not understand something, to just try it out and learn how it works. We promise it will not break anything. Code well my friends!