Introduction
This chapter demonstrates about the W3.CSS Round which demonstrates about the rounded classes and its types following are the concepts covered in this chapter.
- Round Class
- Circle Class
- Circle inside Text
- Nested Circle
Description
In W3.CSS user can add rounded corners to HTML elements by using the w3-round-size class These classes can be tabulated below.
The code below demonstrates the round classes as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Round Classes</h2>
<div class="w3-panel w3-round-small w3-aqua">
<p>SPLESSONS with w3-round-small</p>
</div>
<div class="w3-panel w3-round w3-aqua">
<p>SPLESSONS with w3-round</p>
</div>
<div class="w3-panel w3-round-large w3-aqua">
<p>SPLESSONS with w3-round-large</p>
</div>
<div class="w3-panel w3-round-xlarge w3-aqua">
<p>SPLESSONS with w3-round-xlarge</p>
</div>
<div class="w3-panel w3-round-jumbo w3-aqua">
<p>SPLESSONS with w3-round-jumbo</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Class | Description |
|---|---|
| w3-round | Which is the rounded element with border radius 4px. |
| w3-round-small | Which is the rounded element with border radius 2px. |
| w3-round-medium | Which is the rounded element with border radius 4px. |
| w3-round-large | Which is the rounded element with border radius 8px. |
| w3-round-xlarge | Which is the rounded element with border radius 16px. |
| w3-round-xxlarge | Which is the rounded element with border radius 32px. |
| w3-round-jumbo | Which is the rounded element with border radius 64px. |
Description
In w3.CSS user can display the content inside a circle by using w3-circle class. In which user can insert the content as well as images and the code below demonstrates the circle class as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>The w3-circle Class</h2>
<img src="splessons.jpg" class="w3-circle" alt="splessons" style="width:400px">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can insert the text inside a circle by using the w3-circle class which can be useful while designing the web pages. The code below demonstrates the tect inside a circle as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-padding-32 w3-blue w3-circle w3-center">
<h1>SPLESSONS</h1>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Nested circle is known as the circle inside a circle in which user can insert text or images which is done by the w3-circle The code below demonstrates circle inside a cirle with text as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>A Circle in a Circle</h2>
<div class="w3-padding-32 w3-blue w3-circle">
<div class="w3-padding-32 w3-white w3-circle w3-center" style="width:55%">
<p class="w3-xlarge">SPLESSONS<br>Tutorials!<p>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User can insert circle inside a circle.
- W3.CSS have different round classes.
- User can insert image or text inside a circle.