You can develop a custom Adobe Experience Manager (AEM) column control component to address your business requirements. An AEM column control component lets an AEM author split the content in the main panel of the web-page into multiple columns. Using a component dialog, an author defines the number of columns required and then create, delete, or move content within each of the columns.
As specified, an author can change the number of columns and the border color by using the column's dialog.
This development article walks you through how to build this custom column component. To read this development article, click https://helpx.adobe.com/experience-manager/using/custom_columns.html.
NOTE - This artilce is for the Classic UI. Its recommended that you use Touch UI. See this article -- http://scottsdigitalcommunity.blogspot.ca/2017/09/creating-custom-touch-ui-grid-component.html.