HTML and CSS code for creating a rounded rectangle using CSS3

Published on Aug. 22, 2023, 12:16 p.m.

Sure, I’ll provide an answer in English.

Here’s an example of a complete HTML and CSS code for creating a rounded rectangle using CSS3:

HTML code:

<div class="rounded-rectangle">
  <p>This is a rounded rectangle</p>
</div>

CSS code:

.rounded-rectangle {
  border-radius: 10px; /* Sets the border radius to 10 pixels */
  width: 300px; /* Sets the width of the rectangle */
  height: 100px; /* Sets the height of the rectangle */
  background-color: #f2f2f2; /* Sets the background color of the rectangle */
  padding: 20px; /* Sets the padding inside the rectangle */
}

In this example, we create a div with a class called “rounded-rectangle” and use CSS to round its corners. We set properties such as border radius, width, height, background color, padding, etc., to define the rounded rectangle we want.

Tags: