Quisiera saber si me pueden guiar cómo lograr personalizar los bordes de los post de Tumblr. Quisiera lograr un borde ondulado tal como lo muestra en la imagen.
Ya encontré el borde en HTML y CSS en este enlace:
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
background-color: #fff;
color: #ffF;
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 2em;
margin: 0;
padding: 0;
}
.wave {
text-align: center;
background: linear-gradient(to bottom, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
.content {
color: #333;
font-size: 0.8em;
padding: 1em;
}
<div class="wave">Tengo un borde ondulado</div>
<div class="content">
Con dos pseudo-elementos especiales (before y after) y el poder de repetir gradientes radiales de CSS, este tipo de rizos que parecen olas se pueden hacer si necesidad de una imagen.
</div>
Pero sinceramente tengo conocimientos muy básicos en esto. Sé que tengo que editar el HTML y los estilos del tema, sin embargo no sé qué elemento en el código modificar y qué debo alterar para lograr lo que quiero en la imagen.
¿Cómo podría aplicar un efecto similar al mostrado arriba, pero en los posts de Tumblr?