Adding border to whole site (Responsive and without top border)

This effect is achieved by media queries in your style sheet or custom css. For example:

.container {padding: 30px}
@media only screen and (max-width: 767px) {
.container {padding: 10px;)
}

This snippet results in padding of 30px on a desktop or 10px for a narrow screen.

In practice there will be many styles a designer would want to change for narrower viewports, and screens are not just small or large, so there may be different styles for a series of steps in screen width.