Hi there,
Those are custom columns and the two tone borders are background gradients width a custom block that matches the site background over the gradient backgrounds.
If you want to replicate that effect, first, select each column where you want the effect to be added to and set some border radius to the columns. You can add the border radius in px value.
Then, click on the section settings that contains the columns and click the customize option then add this code to the Element CSS option:

$el .x-column {
background-image: -webkit-linear-gradient(to bottom, #3d308b, #33125a);
background-image: linear-gradient(to bottom, #3d308b, #33125a);
}
$el .x-column:before {
content: "";
display: block;
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border-radius: calc(10px - 3px);
background-color: #fff;
z-index: -1;
}
Please take note of these lines in the code:
background-image: -webkit-linear-gradient(to bottom, #3d308b, #33125a);
background-image: linear-gradient(to bottom, #3d308b, #33125a);
This will set the gradient background to the columns that will give the border effect. You can replace the code with the gradient color that you prefer. You may use this gradient generator site to get gradient codes.
Also this lines:
border-radius: calc(10px - 3px);
background-color: #fff;
The 10px value in the code is the border radius value you set to the columns a directed in the first step you did for this setup
Then the background color is the color that matches the background color where the section is.
Please update the values in the code accordingly to your setup.
Also, I am not sure which button border you are referring to in your last question. Would you mind clarifying?
Thank you.