css - Rounded Corners Part 4: Advanced Shapes Using border-radius

Creating Unique Shapes with Four Values

By playing with different values, you can create cool UI elements.

Example 7: Leaf-Like Shape

.leaf {

  width: 150px;

  height: 100px;

  background-color: teal;

  border-radius: 50% 0;

}

Explanation:

The top-left corner is rounded (50%), while the other corners are sharp.

This is useful for creative UI designs.

Example 8: Speech Bubble

.speech-bubble {

  width: 200px;

  height: 100px;

  background-color: lightblue;

  border-radius: 20px;

  position: relative;

}

.speech-bubble::after {

  content: "";

  position: absolute;

  bottom: -10px;

  left: 20px;

  width: 20px;

  height: 20px;

  background-color: lightblue;

  clip-path: polygon(0 0, 100% 0, 50% 100%);

}

Explanation:

The main div (.speech-bubble) has rounded corners.

The ::after pseudo-element creates the pointing tail.