Frame Layout
<style>
* { box-sizing: border-box; }
.flayout {
border-width: 20px;
border-style:dashed;
border-color: white #00ffb7;
height: 180px;
width: 180px;
max-width:100%;
box-shadow: 0 0 12px rgba(0,0,0,0.5),inset 0 0 12px rgba(0,0,0,0.5);
background-color: rebeccapurple;
margin:10px;
}
</style>
<div class="flayout"></div>.flayout{
border-style: solid;
}.flayout{
border-style: dashed;
}.flayout{
border-style: double;
}.flayout{
border-style: dotted;
}.flayout{
border-style: double dotted;
}.flayout{
border-style: dashed dotted;
}.flayout{
border-style: dotted double;
}.flayout{
border-style: dotted dashed;
}.flayout{
border-style: dashed double;
}.flayout{
border-style: double dashed;
}.flayout{
border-style: solid dashed;
}.flayout{
border-style: solid double;
}
So,