How can create a bottom curve aside bottom-border-radius

Question

I would like to make a rounded div using css, I already used the bottom-border-radius but I dont want that, if there is any other way to achieve that please share.

I know this can be achieved by using bottom-border-radius but is there any other way?

Answer 1

you will use shorthand border-radius property and also individually have to give values like this

.sample1 {
	width: 100px;
	height: 100px;
	margin-bottom: 5px;
	border-radius: 0 0 50% 50%;
	background-color: #cccccc;
}
.sample2 {
	width: 100px;
	height: 100px;
	margin-bottom: 5px;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	background-color: #444444;
}

<div class="sample1">
</div>

<div class="sample2">
</div>