Home HTML/CSS How to make rounded corner in css (create rounded borders with css)

How to make rounded corner in css (create rounded borders with css)

HTML/CSS

CSS (Cascading Style Sheets CSS) is a language that helps to design the appearance of web page. CSS is useful to style your content and improve the design appearance

Create a round in css

 <html>  
 <head>  
 <title>create a circle</title>  
 <style type="text/css">  
 .square {  
      float: left;  
      height: 200px;  
      width: 200px;  
      border-radius:50%;  
      background-color: #666;  
 }  
 </style>  
 </head>  
 <body>  
 <div class="square"></div>  
 </body>  
 </html>

Create an ellipse in css

 <html>  
 <head>  
 <title>create an ellipse</title>  
 <style type="text/css">  
 .square {  
  float: left;  
  height: 200px;  
  width: 200px;  
  border-radius:50%;  
  background-color: #666;  
  width: 300px;  
 }  
 </style>  
 </head>  
 <body>  
 <div class="square"></div>  
 </body>  
 </html>

Create custom shape

 <html>  
 <head>  
 <title>Create custom shape</title>  
 <style type="text/css">  
 .square {  
  float: left;  
  height: 200px;  
  width: 200px;  
   border-top-left-radius: 0px;  
  border-top-right-radius: 30px;  
  border-bottom-right-radius: 60px;  
  border-bottom-left-radius: 90px;  
  background-color: #666;  
  width: 300px;  
 }  
 </style>  
 </head>  
 <body>  
 <div class="square"></div>  
 </body>  
 </html>

How to make rounded corner in css (create rounded borders with css)

How to make rounded corner in css (create rounded borders with css)

Reviewed by Unknown on 11:06 PM Rating: 5