How Can I Create a Curved Border with a Rounded End Using CSS?

Border Curve CSS: Creating Curved Edges with Circles

In web design, it's often necessary to create curved borders or edges to enhance the aesthetics of a page. One common challenge is creating a circle with a curved end, as shown in the provided image.

The Challenge: Achieving a Rounded Border with a Curved End

Achieving the desired effect in CSS can be tricky. Using border-radius alone will result in a semi-circular shape, not a curve with an elongated end.

The Solution: Leveraging SVG as Background

To create a border with a curved end in CSS, we can utilize SVG (Scalable Vector Graphics). SVG allows us to define complex shapes using XML code.

The Code:

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

Explanation:

• We create a container class .bottom-bar to establish the background color, positioning, and height.
• We define a class .circle to represent the circles.
• We set top: -28px to position the circles slightly above the bottom bar.
• The background property utilizes a data URI to embed an SVG image as the background. The SVG path defines a shape with a curved end.
• We specify the dimensions and horizontal margin for the circles.

Benefits of Using SVG:

• SVGs are vector graphics, which means they're resolution-independent and can scale without losing quality.
• They provide greater flexibility in creating complex shapes compared to CSS properties alone.
• SVGs can be easily integrated into HTML and CSS code.

By utilizing SVG as a background, we can effectively achieve the desired curved border with rounded ends, enhancing the visual appeal of our web design.

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