Articles → CSS → border-radius property in CSS3

border-radius property in CSS3






Purpose





Syntax


  <element style=" border-radius:value_in_pixel;" />



Specify a corner of the element















Click to Enlarge


Rules of specifying corner































Example


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<form>
		<div style="border: 2px solid red; width:100px;height:100px;  border-radius:30px;" />
		<!--one value-->
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<div style="border: 2px solid red; width:100px;height:100px;  border-radius:30px  20px;" />
		<!--two values-->
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<div style="border: 2px solid red; width:100px;height:100px;  border-radius:30px  20px 40px;" />
		<!--three values-->
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<div style="border: 2px solid red; width:100px;height:100px;  border-radius:30px  20px 40px 50px;" />
		<!--four values-->
	</form>
</body>

</html>



Output



Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Friday, January 27, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250