Working with borders
This article applies to both versions of the builder in all BEE Pro plans.
Border settings are available in the row settings of any design created in the BEE builder. While working with borders, you have the option to do so for all sides, or for each side individually. This gives you flexibility in setting the look and feel of your design.
For any border that you use, you can customize the following values:
- Style (Solid, dotted, or dashed)
- Width (0-30px)
- Color
Row Borders
When you have a row selected on the builder stage, you will see border options in two places within the sidebar:
- Under the Row Properties section, you will find Content area border (New!)
- In the Customize Columns section, you will find another Border option
Let's take a look at how these options work.
Content Area Borders
As the name implies, a content area border will apply to the entire width of your design. This border feature applies to the entire row, rather than individual columns.
For example, say you have several two-column rows in your design. You want to apply a border to the entire row in both mobile and desktop views. You can accomplish this with the following steps:
- Select the intended row on the builder stage.
- Locate the Content area border option under Row properties in the sidebar.
- Set a border style, width, and color.
The border will apply to the entire content area width of your row, regardless of columns. This means that it will apply to the entire row consistently, even if the content stacks.
You can also use the More options toggle to apply different border values to any side of your row. You can change the border style, width, and color for all sides.
Column Borders
If you want to apply borders to columns, use the Border option in the Customize Columns section. This option applies borders only to the column you have selected.
For example, say you're working with the same two-column design. In this case, you want to apply the border only to the column that includes text, rather than the entire row. You can accomplish this with the following steps:
- Select the intended row on the builder stage. In the sidebar, scroll down to the Customize columns section. You will see the menu displaying the two different columns.
- Click on column 1 to edit the properties of this column.
- Set a border style, width, and color.
- Repeat on each column to accomplish the desired design.
You can also use the More options toggle to apply different border values to any side of your row. You can change the border style, width, and color for all sides. You can select other columns within your row to apply unique border values to those columns.
Rounded Corners
You can now apply rounded corners to any of your rows! This feature works both with and without corners. In either case, you can use this feature to apply a softer border effect to your designs. Look for the option called Content area rounded corners. It's located in the row properties sidebar, above the content area border option.
By default, the content area rounded corners feature applies to all four corners of the row. You can customize which corners are rounded by toggling on More options.
As mentioned above, you can round corners without borders as well. With this type of design, you'll want to apply a unique content area background color to the desired row. The effect will not be visible if you have the same background color applied to both the row and content area.
You can also use this feature to apply rounded corners to background images.
If you have any questions, feel free to contact us.
Comments
7 comments
Hi Massimo, we have a bug with borders, is this a good place to report it?
On a multi-column layout (2-4 columns) when setting Borders on the different columns they end up being different heights because the inner-content of each "box" is different.
Would it be possible to either
1) Make it so that border on "column 1" and "column 2" are same height
OR
2) Have a separate "structure border" setting?
Our use case is that we want to have a single nice border around the whole email, but email is made up of 1- and 2-column structures. So the TOP structure gets a LEFT, TOP, RIGHT border, the BOTTOM structure gets a LEFT, BOTTOM, MIDDLE border, and all middle structures only get LEFT and RIGHT borders. and this works great if they are All 1-column structures. This all breaks down when it's a multi-column structure.
Hope that makes sense.
Thank you!
[ Paid BEE Plugin user and really loving it! ]
Hi Vadimb, thank you for the kind words about the editor. We see what you mean. We'll discuss it internally and see what we can do. Thanks again for your feedback.
Was this issue solved?
Hey @Massimo, can you please update how we can resolve this multicolumn border issue?
While using multi-columns row, if the content of sibling columns differs from each other then the borders around the columns do not match the height of parent row. This results in different borders around different columns in a single row.
Hi Raviraj, thanks for reaching out. Borders in a multi-column row will only extend as far as the content entered in each column. which can cause border alignment issues when the columns have different lengths. To prevent this issue, we recommend using content that is all the same size in multi-column rows (i.e. all images have the same dimensions). With that being said, I'm happy to pass along your feedback about this to our Product team for consideration as well!
Hi, are there any developments on this front? Same-sized content in a row is not always possible, and columns stacking on mobile is a further problem. (I have the same use case as Vadim above)
Hi Gabriel, thanks for your comment. We are going to open a ticket so we can analyze better your case. Best.
Please sign in to leave a comment.