CSS Controls: Applying Border and 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” template, 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.

Logo with no Border
Logo without Border
Logo with a border
Logo with Border

Quick Links

Editing a border

To get started select an element that you wish to add a border to and navigate to the Styles pane > Design > Border & Corners section.

Border Settings Section
Border Settings

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
Left Radius

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
All Border Toggle

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
Example

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.

None
None

Dotted - Specifies a dotted border

Dotted
Dotted

Dashed - Specifies a dashed border

Dashed
Dashed

Solid - Specifies a solid border

Solid
Solid

Double - Specifies a double border

Double
Double

Groove - Specifies a 3D grooved border. The effect depends on the border-color value

Groove
Groove

Ridge - Specifies a 3D ridge border. The effect depends on the border-color value

Ridge
Ridge

Inset - Specifies a 3D inset border. The effect depends on the border-color value

Inset
Inset

Outset - Specifies a 3D outset border. The effect depends on the border-color value

Outset
Outset

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
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
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
With and Without 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
Settings

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
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
Top Right and Bottom Left Radius

After you have completed this you should see the following!

Completed Border Radius Button
Radius

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!

Level up with the Site Designer help guide.

Site Designer gives you the power to work with CSS visually. These code-free controls allows you to experiment with new styles and layouts without having to be a pro at hand coding. Discover the power of Site Designer and start dragging, droppping, clicking, and sliding your way to an epic website.