Register now or log in to join your professional community.
div {
border-top-left-radius: 10px;
border-radius: 0;
}
{
border-top-left-radius: Xem;
}
(X is the length of the border)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.di{
display: inline-block;
width: 200px;
height: 200px;
border: 2px;
background: red;
border-top-left-radius: 20px;
padding-left: 20px;
padding-top: 20px;
}
</style>
</head>
<body>
<!-- <input type="text" id="myInput" oninput="myFunction()"> -->
<!-- <button id="button"> show </button> -->
<!-- <iframe src="https://www.w3schools.com" id="load" width="100%" height="590"></iframe> -->
<input type="text" id="in" onchange=" myname()" >
<!-- <button onclick="click() "> </button> -->
<p id="demo"></p>
<!-- <input type="text" id="demo" value=" 5"> -->
<div class="di">
alaa tabash
</div>
<div class="di">
alaa tabash
</div>
<div class="di">
alaa tabash
</div>
<div class="di">
alaa tabash
</div>
<script type="text/javascript" src="alaa.js"> </script>
</body>
</html>
div{
border:2px solid;
border-top-left-radius: 3em;
}
Dear Karim,
Border radius has 4 value i.e. border-radius: 0000;
First: Top-left
Second: Top-right
Third: Bottom-right
Forth: Bottom-left
As far as your question concern, you can just provide border:radius: 5px 000;
Regards,
Muhammad Zaid
