Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create rounded image with CSS
Using CSS, we can build a visually attractive HTML document. Sometimes, when creating a web page, we want certain images or elements to have rounded corners. The CSS border-radius property is used in this situation. It can be used to draw attention to your website and make it stand out to visitors.
CSS border-radius property
An element's outer border edges can be rounded at the corners using the CSS border-radius property. There can be one, two, three, or four values in this property. The border-radius can be set using the border-radius property. When border-collapse is collapsing, this property does not apply to the table elements.
Syntax
Following is the syntax for CSS border-radius property
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Example
Let's look at the following example, where we are going to create a rounded image with CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
color: #DE3163;
background-color: #F2F4F4;
}
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>ROUNDED IMAGE</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4M63a1Jp3mtSgSRqhIyxj4E7_8X7fueNLNQ&usqp=CAU" alt="tree" style="width:200px">
</body>
</html>
When we run the above code, it will generate an output consisting of the rounded image displayed on the webpage.
Example
Considering another scenario, where we are going to apply rounded corners for an element
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #F4ECF7;
padding: 150px;
}
#tp {
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
border: 3px solid #1E8449;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div id="tp">WELCOME</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the text applied with rounded corners on the webpage.
1K+ Views
