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.
