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:

• Using Border-radius property
• Using Clip-path property
• Using SVG <rect> property

Approach 1: Border-radius Property

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.

Output:

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.

Output:

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.

Output: