How to Create a Round Corner Div in HTML CSS

You can add round corners to all four corners of a div using CSS’s border-radius property.

Start by creating your div.

HTML Code

<div class="rounded-corners">
  <p>Div With Rounded Corners</p>
  <p>
    Dummy Content to be held in this div.
    Dummy Content to be held in this div.
    Dummy Content to be held in this div.
  </p>
</div>

CSS Code

div {
  padding: 100px;
  background-color: #ddd;
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Then add a border radius.

.rounded-corners {
  border-radius: 5px;
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

You can also create one, two, or three round corners of a div.

One Round Corner Div

Top Left Corner

div {
  border-radius: 10px 0 0 0;
}

Or

div {
  border-top-left-radius: 10px;
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Top Right Corner

div {
  border-radius: 0 10px 0 0;
}

Or

div {
  border-top-right-radius: 10px;
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Bottom Left Corner

div {
  border-radius: 0 0 10px 0;
}

Or

div {
  border-bottom-left-radius: 10px;
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Bottom Right Corner

div {
  border-radius: 0 0 0 10px;
}

Or

div {
  border-bottom-right-radius: 10px;
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Two Round Corners Div

You can create a two round corners div by targeting the appropriate corners using the border radius properties.

Example

div {
  border-radius: 10px 0;  
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Three Round Corners Div

You can also create a div with three rounded corners.

Example

div {
  border-radius: 10px 10px 10px 0;  
}

Results

Div With Rounded Corners

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.