Write CSS to create a box with border, padding and rounded corners

Description: Create a box that has a 2px green border, 20px padding, 10px rounded corners and a light green background.

Hint:

• Use border, padding, border-radius and background-color.

---

CSS for a box with rounded corners

<style>
  .box {
    width: 300px;
    padding: 20px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: #e8f5e9;
  }
</style>

<div class="box">This is a box with rounded corners.</div>

Output in the browser:

How it works

• padding adds space inside the border.
• border-radius rounds the corners.

Read CSS Borders and CSS Box Model.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.