Надо указывать не только толщину рамки, но также ее начертание и цвет:
.flex {
display: flex;
flex-direction: row;
justify-content: center;
border: 10px solid #ccc;
border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<title>Document</title>
</head>
<body>
<div class="flex">
<div class="flexbox">Контейнер 1 </div>
<div class="flexbox">Контейнер 2 </div>
<div class="flexbox">Контейнер 3 </div>
<div class="flexbox">Контейнер 4 </div>
</div>
<script src="scripts/script.js"></script>
</body>
</html>
А если хотите разграничить ячейки, то такую же махинацию надо выполнить для класса flexbox:
.flexbox {
border: 5px solid #ccc;
}
border-style