Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

Rounded Corners in CSS


Rounded Corners in CSS:-


Rounded Corners

With the CSS border-radius property

border-radius Property:-

the border-radius property defines the radius of an element's corners on the HTML.

Code family




<style> 
#code1 {
  border-radius: 25px;
  background: blue;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

#code2 {
  border-radius: 25px;
  border: 2px solid red;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

#code3 {
  border-radius: 25px;
  background: url(https://i.ibb.co/4gfyLgW/mountain-4771100-640.jpg);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px;
  color:white;
}
</style>


<h1>Code Family</h1>

<p id="code1">Code Family</p>
<p>we are code family</p>
<p id="code2">Code Family</p>
<p>we are code family</p>
<p id="code3">Code Family</p>

border-radius - Specify Each Corner:-

The border-radius property can be using one to four values for radius.
Four values - border-radius: 25px 40px 20px 3px;



  • first value applies to top-left corner,
  • second value applies to top-right corner,
  • third value applies to bottom-right corner,
  • fourth value applies to bottom-left corner,


    • Code family



    <style> 
#code1 {
  border-radius: 15px 50px 30px 5px;
  background: blue;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#code2 {
  border-radius: 15px 50px 30px;
  background: red;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#code3 {
  border-radius: 15px 50px;
  background: lightblue;
  padding: 20px; 
  width: 200px;
  height: 150px; 
} 

#code4 {
  border-radius: 15px;
  background: yellow;
  padding: 20px; 
  width: 200px;
  height: 150px; 
} 
</style>
</head>
<body>

<h1>The border-radius Property Code family</h1>

<p>Code Family</p>
<p id="code1"></p>

<p>Code Family</p>
<p id="code2"></p>

<p>Code Family</p>
<p id="code3"></p>

<p>Code Family</p>
<p id="code4"></p>


    create elliptical corners:-


    <style> 
#code1 {
  border-radius:  50px / 15px;
  background: blue;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#code2 {
  border-radius:15px / 50px;
  background: red;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#code3 {
  border-radius: 50%;
  background: lightblue;
  padding: 20px; 
  width: 200px;
  height: 150px; 
} 


</style>
</head>
<body>

<h1>The border-radius Property Code family</h1>

<p>Code Family</p>
<p id="code1"></p>

<p>Code Family</p>
<p id="code2"></p>

<p>Code Family</p>
<p id="code3"></p>


    More Topics