How Can I Create a Rounded Border with Curved Ends Using CSS and SVG?

Creating a Curved Border with Rounded Ends Using CSS and SVG

When building a website, it's common to encounter design details that require creative solutions. One such detail is the creation of a round border with curved ends.

Problem:
A web designer is struggling to achieve a round border with curved ends using CSS. They have tried to achieve this using rounded corners, but it does not produce the desired shape.

Solution:
To create a curved border with rounded ends, we can utilize Scalable Vector Graphics (SVG) as the background. SVG allows for the creation of custom shapes and curves, providing more flexibility and control over the design.

To achieve the desired shape, we'll create a custom SVG element that resembles a crescent-shaped half-circle. Here's an example:

<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"></path>
</svg>

This SVG defines a path that starts with a horizontal line, then transitions to a downward curve. Using CSS, we can then set this SVG as the background of the element we want to have the curved border.

Here's the updated CSS code:

.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"></path></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

By combining the custom SVG shape with the CSS background property, we can create a round border with curved ends that mimics the desired design.

The above is the detailed content of How Can I Create a Rounded Border with Curved Ends Using CSS and SVG?. For more information, please follow other related articles on the PHP Chinese website!