Rendas em CSS

.lace {
 height: 70px;
 background: #f9b;
        margin-bottom: 10px;/* distancia da margem inferior para separar do conteudo*/
}

.renda1  {
background-image: radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, white 15px, rgba(255,255,255,0) 16px),
radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, white 15px, rgba(255,255,255,0) 16px),
radial-gradient(circle at 15px 0, rgba(255,255,255,0) 4px, white 5px, rgba(255,255,255,0) 6px),
radial-gradient(circle at 5px 5px, rgba(255,255,255,0) 1px, white 2px, rgba(255,255,255,0) 3px);
background-repeat: repeat-x;
background-position: 0 0, 15px 6px, 0 0, 25px 9px;
background-size: 30px 21px, 30px 21px, 30px 21px, 30px 20px;
}

.renda2 {
background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 9px, white 10px, rgba(255,255,255,0) 11px),
linear-gradient(to left bottom, rgba(255,255,255,0) 9px, white 10px, rgba(255,255,255,0) 11px),
radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, white 6px, rgba(255,255,255,0) 7px);
background-repeat: repeat-x;
background-size: 12px 20px, 12px 20px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}

.renda3 {
background-image: radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fff 6px, rgba(255,255,255,0) 7px),
radial-gradient(circle at 12px 0, rgba(255,255,255,0) 11px, #fff 12px, rgba(255,255,255,0) 13px),
radial-gradient(circle at 12px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px),
radial-gradient(circle at 12px 12px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px),
linear-gradient(to left, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px);
background-repeat: repeat-x;
background-position: 6px 35px, 6px 39px, 6px 42px, -6px 43px, 8px 45px;
background-size: 12px 12px, 24px 13px, 24px 12px, 24px 24px, 24px 8px;
}

.renda3:before {
content: "";
display: block;
height: 35px;
background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px),
linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px);
background-repeat: repeat;
background-size: 12px 14px, 12px 14px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}

.renda4 {
background-image: radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, white 6px, rgba(255,255,255,0) 6px),
radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, white 6px, rgba(255,255,255,0) 6px);
background-repeat: repeat-x;
background-position: 0 29px, 0 33px;
background-size: 12px 12px;
}

.renda4:before {
content: "";
display: block;
height: 31px;
background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 5px, white 6px, rgba(255,255,255,0) 6px),
linear-gradient(to left bottom, rgba(255,255,255,0) 5px, white 6px, rgba(255,255,255,0) 6px);
background-repeat: repeat;
background-size: 6px 12px, 6px 12px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}