W3-round class

M2-R5.1 · Chapter 5: CSS Framework · 1 min read

W3-round Class

  • W3.CSS provides several rounding classes to give elements like buttons, images, divs, and panels soft or circular corners.
  • These make your design modern, clean, and visually appealing.

Syntax

<div class="w3-round w3-blue w3-padding">Rounded Box</div>

Example 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-padding">

<h2 class="w3-center">W3.CSS Round Classes Example</h2>

<div class="w3-round-small w3-red w3-padding w3-margin">Small Round</div>
<div class="w3-round w3-blue w3-padding w3-margin">Normal Round</div>
<div class="w3-round-large w3-green w3-padding w3-margin">Large Round</div>
<div class="w3-round-xlarge w3-orange w3-padding w3-margin">Extra Large Round</div>
<div class="w3-round-xxlarge w3-purple w3-padding w3-margin">XX-Large Round</div>
</body>
</html>