Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add a Rounded Border with CSS
Using CSS, we can build a visually appealing HTML document. Some elements or images may have rounded borders, which is something we might want to consider while building a web page. With this, we can use the CSS border-radius property. Because the rounded borders refer to security, and dependability?all of which improve user experience?we might refer to them as "friendly rectangles" a lot.
Let's dive into the article to learn more about adding a rounded border with CSS. Before that, we will have a quick look at the CSS border-radius property.
CSS border-radius property
An element's outer border edges can be rounded at the corners using the CSS border-radius property. There are four possible values for this property: one, two, three, or four. Setting the border-radius is done using the border-radius property. The table components do not apply this property while border-collapse is collapsing.
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 rounded borders using the CSS border-radius property on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border-radius: 100px 100px;
background: #D5F5E3;
color: #DE3163;
padding: 20px;
text-align: center;
width: 280px;
height: 100px;
}
</style>
</head>
<body>
<center>
<h2> Creating rounded borders using CSS </h2>
<div class="tutorial">
<h4> WELCOME Everyone.! </h4>
</div>
</center>
</body>
</html>
On running the above code, an output window will pop up consisting of the round-bordered element displayed on the webpage.
Example
Considering another scenario where we are going to create the left-rounded border using the border-bottom-left-radius.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border: 5px solid #1C2833;
width: 330px;
height: 300px;
background-color: #EBF5FB;
color: #7D3C98;
font-family: verdana;
border-bottom-left-radius: 75px;
margin: auto;
}
.tp {
font-size: 19px;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">
<p class="tp">Mahendra Singh Dhoni is an Indian professional cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014. Dhoni is widely considered one of the greatest cricket captains, wicket-keeper-batsman and finishers in the history of cricket. </p>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of elements where the left bottom end was applied with a rounded border displayed on the webpage.
Example
In the following example, we're going to create a rounded border on the top right using the Border-Top-Right-Radius property.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border: 5px solid #34495E;
width: 320px;
height: 280px;
background-color: #D5F5E3;
color: #DE3163;
border-top-right-radius: 75px;
margin: auto;
}
.tp {
font-size: 18px;
font-family: verdana;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">
<p class="tp"> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</div>
</body>
</html>
On running the above code, an output window will pop up consisting of the rounded border on the top right of the element displayed on the webpage.
151 Views
