I rarely use borders on div elements. But one day, I had to add one—and wow, it looked way too boxy.

I was using Eclipse, hitting Ctrl + Space to look for style suggestions, but the property to make the corners round didn’t show up. That’s when I had to Google it. Yes, even for something this basic. 🙃

---

The Basic div with a Border

Let’s start with a simple div that has a border:

<div style="border: 2px solid #ccc;"></div>

The border shows up just fine—but the corners are sharp.
If you want a more modern or softer look, rounded corners are the way to go.

---

The Solution: Use border-radius

All you need to do is add these style properties:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

Or simply:

border-radius: 10px;

This single line applies the same radius to all four corners.

---

Full Example

Here’s how the full div looks with inline styles:

<div style="border-bottom-left-radius: 10px; 
            border-bottom-right-radius: 10px; 
            border-top-left-radius: 10px; 
            border-top-right-radius: 10px; 
            border: 2px solid #ccc;">
</div>

Or the shorter, cleaner version:

<div style="border-radius: 10px; border: 2px solid #ccc;"></div>

---

🔧 Customizing the Curve

The value 10px is just a starting point.

• Increase it to make the corners more round.
• Decrease it for a subtle effect.
• You can even set different values for each corner if you want a custom look.

---

Final Thoughts

Even something as simple as adding a rounded corner can make your UI feel smoother and more polished. Sometimes it’s the small visual touches that make a big difference.

I wish editors like Eclipse would suggest border-radius more easily. But hey, that’s what Google (and blogs like this 😉) are for.

Happy coding!