CloseTag | الشروحات | CSS | الزوايا المدورة في لغة CSS | CSS Rounded Corners

<!DOCTYPE html>
<html>
<head>
<style> 
*
{
  box-sizing: border-box;
}

.container
{
  display:flex;
}
.item1 ,.item2,.item3,.item4
{
  flex:1;
  margin:20px;
  height:150px;
  border:#d63031 3px solid;
  background-color: #2196F3;
}

.item1
{
  border-radius:50px 0 50px 0;
}

.item2
{
  border-radius:50px 50px 0 0;
}

.item3
{
  border-radius:50px 50px 50px 0;
}

.item4
{
  border-radius:50px 0 0 0;
}
</style>
</head>
<body>
<h1>CSS rounded corners</h1>
<p>CSS rounded corners with border-radius Property</p>
<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
</di>
</body>
</html>