CSS scalloped border for image using radial-gradients

Question

I'm trying to use CSS to make a scalloped border for an image using radial-gradients. Here is what I have so far: JS FIDDLE.

As you can see, the top edge of the image has pointy tips, while the bottom edge is rounded. How can I get the pointy tips at the bottom as well? (Like the bottom edge flipped upside down.) I would appreciate your help!

HTML:

<body>
  <div class="top-container">
    <p>Top section.</p>
  </div>
  <div class="container">
   <p>Image Section</p>
  </div>
  <div class="next-container">
    <p>Bottom Section</p>
  </div>
</body>

CSS:

body {
  text-align:center;
  background: white;
}
.top-container {
  background: white;
  }
.container {
  position:relative;
    background-image: url("http://placekitten.com/1280/120"); 
    height: 100px;
    padding-top:40px;
    width: 100%;
    left: -10px;
}
.container::before { 
    position:absolute;
  bottom: -20px;
    left: 0px;
    width: 100%;
    content:" ";
    background: 
  radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);
  background-color: transparent ;  
    background-size:20px 40px;
  height:50px;
  background-repeat: repeat-x;
    background-position: -20px 0px;
}
.container::after { 
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    content:" ";
    background: 
  radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
    background-color: transparent;  
    background-size:20px 40px;  
    height:50px;
    background-repeat: repeat-x;
    background-position: -25px 0px;
}
.next-container {
  background: white;
}

You mean like [this](https://jsfiddle.net/oq2ja51g/2/) (or) like in the last snippet/image here - http://stackoverflow.com/questions/25895895/creating-a-droplet-like-border-effect-in-css/25903879#25903879? — Harry, Nov 04 '16 at 03:10

score 1 · Accepted Answer · answered Nov 04 '16 at 03:13

Use the same radial-gradient you have on the top, but here you just rotate it 180 degrees

body {
  text-align:center;
  background: white;
}
.top-container {
  background: white;
  }
.container {
  position:relative;
  background-image: url("http://www.rhapsodazzle.com/flowers.jpg"); 
 height: 100px;
 padding-top:40px;
 width: 100%;
 left: -10px;
}
.container::before { 
  position:absolute;
  bottom: 0;/*-20px;*/
  transform: rotate(180deg); /* added */
  
 left: 0px;
 width: 100%;
 content:" ";
  background: radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
  /*
  radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);*/
  background-color: transparent ;  
 background-size:20px 40px;
  height:50px;
  background-repeat: repeat-x;
 background-position: -20px 0px;
}
.container::after { 
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100%;
 content:" ";
 background: 
  radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
 background-color: transparent;  
 background-size:20px 40px;  
 height:50px;
 background-repeat: repeat-x;
 background-position: -25px 0px;
}
.next-container {
  background: white;
}

<body>
  <div class="top-container">
    <p>Top section.</p>
  </div>
  <div class="container">
   <p>Image Section</p>
  </div>
  <div class="next-container">
    <p>Bottom Section</p>
  </div>
</body>

JSfiddle link: jsfiddle.net/oq2ja51g/3/

Thank you so much! That's exactly what I was looking for. I know it's off topic, but do you have any idea how I can remove the white frame on the right? — user3504783, Nov 04 '16 at 05:47
@user3504783 Set margins of `body` to zero as well as `left` in the `.container` - https://jsfiddle.net/oq2ja51g/4/ — pol, Nov 04 '16 at 13:35

CSS scalloped border for image using radial-gradients

1 Answers1