What We'll Learn

This article is all about adding borders to your section, column, or element. Or, all three! Borders are typically used on buttons, when highlighting text, and to create appealing effects. 

Creating a Border

To create a border around an element, go to Advanced >> Border and select a Border Type. For sections and columns, this will be found under Style >> Border. There are two main attributes of borders: width and radius. Width defines how thick the border is, while radius will curve the edges. Every border has a top, bottom, left, and right side. To change their attributes individually, click the un-link  icons next to width and radius.

Making Beautiful Buttons

Button borders work similarly to other elements, but with an interesting quirk. Like normal, borders are added through the Style tab. However, there’s also an option to add them under the Advanced tab. Using this tab will give odd results, and is best stayed away from.

Here’s a button that has both a normal and a hover border. If you’re unfamiliar with hover effects, then you should check out the article on Setting a Background.

So how was this made? Well, I created a normal border so that the button doesn’t seemingly change size when hovered over. And the normal background was made by picking a random color and setting its opacity to zero (this is the slider at the bottom of your color picker).

Framing Text

Another example of using a border is to frame text, either partially or completely.

Some Great Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Some Even Better Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Advanced Tip: If you’re looking to be extra fancy, you can add a Wrapper Link to this column and have the entire thing be a makeshift button.