border curved css – circle with curved end

by

You can do this using SVG as background:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox='10 10 45 15'  width="64" height="64" fill="%2329a7e8"><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}
<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>


<svg xmlns="http://www.w3.org/2000/svg"
  viewBox='10 10 45 15'
  width="64" height="64"
  fill="#29a7e8">
  <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
</svg>

For a CSS only solution you can consider a combination of radial-gradient to create the curve:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -30px;
  background:
  radial-gradient(circle at top right,transparent 50%,#29a7e8 51%)100% 21px/12px 10px no-repeat,
  radial-gradient(circle at top left,transparent 50%,#29a7e8 51%)0 21px/12px 10px no-repeat,
  radial-gradient(circle at center,#29a7e8 55%, transparent 56%);
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}
<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

More Related Contents:

  1. Fill SVG path element with a background-image
  2. How to modify the fill color of an SVG image when being served as background image?
  3. SVG drop shadow using css3
  4. How to create a circle with links on border side
  5. Placing border inside of div and not on its edge
  6. How to style SVG with external CSS?
  7. Setting transform-origin on SVG group not working in Firefox
  8. Responsive CSS Trapezoid Shape
  9. Circular percent progress bar
  10. Border with a transparent centred arrow
  11. How to make a border overlay child div?
  12. How to cut a circular part from an image?
  13. How to calculate required hue-rotate to generate specific colour?
  14. Making an svg image object clickable with onclick, avoiding absolute positioning
  15. How to change SVG color when it is an encoded CSS background image?
  16. CSS border color switch animation: “from” color not correct
  17. How to get rid of extra space below svg in div element
  18. CSS transform origin issue on svg sub-element
  19. Manipulating external svg file style properties with CSS
  20. div with triangle at the bottom with background image
  21. Css hover sometimes doesn’t work on svg paths
  22. SVG LinearGradient hidden if svg is hidden in seperate class
  23. Create a Reverse Clip-Path – CSS or SVG
  24. Internet Explorer and clip-path
  25. How to curve the div from bottom with image background
  26. Border around specific rows in a table?
  27. CSS Inset Borders
  28. svg background image position is always centered in internet explorer, despite background-position: left center;
  29. Removing the Bevel Effect on the Corner of Borders
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment