How to Curve the Outside of a Rectangle in CSS ?
Last Updated :
12 Sep, 2023
In CSS, rectangles are traditionally represented by the <div> element, which is a block-level container. While rectangles are typically associated with straight edges and sharp corners, it is possible to create curved or rounded edges using CSS properties.
In this article, we will explore different approaches to curving the outside of a rectangle using CSS, along with syntax examples and output images.
Here are some common approaches:
One of the simplest and most common ways to curve the outside of a rectangle in CSS is by utilizing the border-radius property. This property allows you to specify the radius of the corners, resulting in rounded edges.
Syntax:
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Each value represents the radius for the corresponding corner. You can either provide a single value for all corners or specify individual values for each corner.
Example 1: In this example, we are using a ,Curved Rectangle with border-radius property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
width: 400px;
height: 200px;
background-color: green;
border-radius: 50px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h1>
Curved Rectangle with border-radius
</h1>
<div class="rectangle"></div>
</body>
</html>
|
Output:
.png)
Approach 2: Clip-path Property
Another approach to creating a curved outside for a rectangle is by using the clip-path property. This property allows you to define a custom shape for an element, effectively clipping or masking its visible area.
Syntax:
clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;
The <shape-function> parameter can take various values, such as circle(), ellipse(), or polygon(). By combining different shape functions, you can create complex curves and outlines.
Example 2: In this example, we are using a Curved Rectangle with clip-path property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
width: 400px;
height: 200px;
background-color: green;
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h1>
Curved Rectangle with clip-path
</h1>
<div class="rectangle"></div>
</body>
</html>
|
Output:
.png)
Approach 3: Using SVG <rect> Property:
To curve the outside of a rectangle in CSS using SVG, you can utilize the <rect> element’s rx and ry attributes for rounded corners.
Syntax:
<rect
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
rx="length"
ry="length"
style="style information"
class="style class" >
</rect>
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
width: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h1>Curved Rectangle with SVG</h1>
version="1.1" width="200" height="100">
<rect x="0"
y="0"
width="200"
height="100"
rx="20"
ry="20"
fill="green" />
</svg>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...