How to Create a Rounded Border with a Curved End Using CSS and SVG?

Border Curved CSS: Achieving a Circle with Curved End

You're facing a challenge in creating a rounded border with a curved end in CSS. Let's dive into a solution that addresses this need.

The key to achieving the desired effect lies in utilizing SVG (Scalable Vector Graphics) as the background for your border. By employing this technique, you can easily create complex shapes with smoothly curved edges.

Here's how you can implement the solution:

.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;
}

In the above code, the .circle class uses the background property to specify an SVG data URI. This URI references an SVG image that defines a curved shape, which is then used as the background of the element. The viewBox attribute of the SVG sets the shape's size and position within the SVG space, and the path element defines the curved shape itself.

By adjusting the values in the path definition, you can control the curvature and size of the shape. You can also change the fill attribute to apply different colors to the border.

This technique offers a flexible and scalable way to create curved borders in CSS, allowing you to achieve visually appealing and dynamic effects in your web designs.

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