css - Rounded Corners Part 5: Combining border-radius with Other Properties

Using border with border-radius

You can combine rounded corners with border styles for a polished look.

Example 9: Card with Border

.card {

  width: 250px;

  height: 150px;

  background-color: white;

  border: 2px solid gray;

  border-radius: 15px;

}

Explanation:

border: 2px solid gray; gives a defined border around the rounded card.

Example 10: Gradient Background with Rounded Corners

.gradient-box {

  width: 200px;

  height: 100px;

  background: linear-gradient(to right, blue, purple);

  border-radius: 25px;

}

Explanation:

linear-gradient(to right, blue, purple); adds a gradient background inside the rounded box.

Conclusion

border-radius makes elements look modern and appealing.

You can control each corner individually or apply a universal radius.

Percentages (%) create circles and ovals for icons and profile pictures.

Advanced shapes like speech bubbles and creative UI elements can be built using border-radius.

Combining border-radius with gradients, shadows, and borders enhances the visual style.

Rounded corners are a simple yet powerful tool in CSS to make UI designs look smooth and polished.