QP School
How to make rounded corners with CSS3 - Printable Version

+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: How to make rounded corners with CSS3 (/showthread.php?tid=5162)



How to make rounded corners with CSS3 - Qomplainerz - 07-26-2023

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Rounded Corners Example</title>
  <style>
    /* Apply rounded corners to the div element */
    div {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div>This div has rounded corners.</div>
</body>
</html>

Explanation:

CSS property border-radius is used to create rounded corners for elements with a border. In this example, the div element has its background color set to light blue and is given rounded corners with a radius of 10 pixels.