Create Rounded Corners with CSS Border-Radius

Introduction

In this lab, participants will explore the powerful CSS border-radius property to create visually appealing rounded corners on web elements. Through a step-by-step approach, learners will start by setting up a basic HTML document and progressively apply various border-radius techniques to understand how to manipulate element corners dynamically.

The lab covers fundamental skills such as creating uniform rounded corners, applying different radii to individual corners, and experimenting with border-radius variations. By working through practical examples, students will gain hands-on experience in using CSS to transform sharp-edged div elements into smooth, rounded design components, enhancing the aesthetic appeal of web interfaces.

Set Up HTML Document

In this step, you'll set up the basic HTML document for exploring CSS border-radius properties. We'll create a simple HTML file that will serve as the foundation for our CSS styling experiments.

Open the WebIDE and navigate to the ~/project directory. Create a new file called index.html by right-clicking in the file explorer and selecting "New File".

Copy and paste the following HTML structure into the index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Border-Radius Exploration</title>
    <style>
      /* We'll add our CSS styles here in the next steps */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border-Radius Examples</h1>
      <!-- We'll add our div elements here in the next steps -->
    </div>
  </body>
</html>

This basic HTML document provides a simple structure for our CSS border-radius exploration. Let's break down the key components:

The <!DOCTYPE html> declaration ensures the browser uses the latest HTML standard
The <meta> tags help with character encoding and responsive design
We've included an internal <style> tag where we'll add our CSS in subsequent steps
The <body> contains a container div that we'll use for our examples

Example output when you open this file in a browser:

CSS Border-Radius Examples

Save the file and make sure it's located at ~/project/index.html.

Apply Basic Border-Radius to Div Element

In this step, you'll learn how to apply the basic border-radius property to create rounded corners on a div element. The border-radius property allows you to create smooth, rounded corners on HTML elements with ease.

Open the index.html file in the WebIDE. Inside the <style> tag, add the following CSS to create a basic div with rounded corners:

<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px;
  }
</style>

Now, add a div with the rounded-box class inside the <body> section of your HTML:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>
  </div>
</body>

Let's break down the CSS properties:

width and height set the size of the div
background-color gives the div a solid color
border-radius: 20px creates rounded corners with a 20-pixel radius
margin adds some space around the div

When you open this HTML file in a browser, you'll see a blue square with rounded corners. The border-radius property applies an equal curve to all four corners of the div.

Example visual output:

+--------------------+
|                    |
|   Blue box with    |
|   rounded corners  |
|                    |
+--------------------+

Experiment by changing the border-radius value to see how it affects the corner curvature. Try values like 10px, 50px, or even 100px to see different rounding effects.

Create Div with Different Corner Radii

In this step, you'll learn how to create divs with different corner radii, giving you more control over the rounding of individual corners. The border-radius property can be used to create unique and interesting shapes.

Update the <style> section in your index.html file with the following CSS:

<style>
  .different-corners {
    width: 250px;
    height: 200px;
    background-color: #2ecc71;
    margin: 20px;
  }

  .top-left-corner {
    border-top-left-radius: 50px;
  }

  .bottom-right-corner {
    border-bottom-right-radius: 30px;
  }

  .mixed-corners {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 60px;
  }
</style>

Now, add the corresponding divs to your HTML body:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>

    <div class="different-corners top-left-corner"></div>
    <div class="different-corners bottom-right-corner"></div>
    <div class="different-corners mixed-corners"></div>
  </div>
</body>

Let's break down the different border-radius applications:

border-top-left-radius: 50px rounds only the top-left corner
border-bottom-right-radius: 30px rounds only the bottom-right corner
The mixed-corners div demonstrates how you can set different radii for each corner independently

Example visual output:

+--------------------+
|  Green box with   |
|  varied corner    |
|  roundings        |
+--------------------+

Experiment by changing the pixel values to see how different corner radii create unique shapes. You can use various units like pixels (px), percentages (%), or even use different values for horizontal and vertical radii.

Explore Individual Corner Radius Properties

In this step, you'll dive deeper into individual corner radius properties and learn how to create more complex and precise rounded corners using different units and techniques.

Update the <style> section in your index.html file with the following CSS:

<style>
  .individual-radius {
    width: 300px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px;
  }

  .elliptical-corners {
    border-top-left-radius: 50px 25px;
    border-top-right-radius: 25px 50px;
    border-bottom-right-radius: 40px 20px;
    border-bottom-left-radius: 20px 40px;
  }

  .percentage-corners {
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
</style>

Add the corresponding divs to your HTML body:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="individual-radius elliptical-corners"></div>
    <div class="individual-radius percentage-corners"></div>
  </div>
</body>

Let's explore the new border-radius techniques:

Elliptical Corners:
- Use two values for each corner: border-radius: horizontal-radius vertical-radius
- Creates an ellipse-like curve instead of a perfect circle
- Example: border-top-left-radius: 50px 25px creates an asymmetric curve
Percentage-based Corners:
- Use percentages to create responsive, proportional corner radii
- border-top-left-radius: 30% rounds the corner based on the element's size
- Great for creating adaptive designs

Example visual output:

+--------------------+
|  Red boxes with   |
|  unique corner    |
|  roundings        |
+--------------------+

Experiment by changing the radius values and units to see how they affect the element's appearance.

Experiment with Border-Radius Variations

In this final step, you'll explore advanced border-radius techniques that can create unique and creative shapes using CSS. We'll demonstrate how border-radius can be used to create complex geometric designs.

Update the <style> section in your index.html file with the following CSS:

<style>
  .creative-shapes {
    width: 250px;
    height: 250px;
    margin: 20px;
    background-color: #9b59b6;
  }

  .circle {
    border-radius: 50%;
  }

  .leaf-shape {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .complex-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
</style>

Add the corresponding divs to your HTML body:

<body>
  <div class="container">
    <h1>CSS Border-Radius Creative Shapes</h1>
    <div class="creative-shapes circle"></div>
    <div class="creative-shapes leaf-shape"></div>
    <div class="creative-shapes complex-shape"></div>
  </div>
</body>

Let's explore these creative border-radius variations:

Perfect Circle:
- Use border-radius: 50% to create a perfect circle
- Works by making the radius equal to half the element's width/height
Leaf-like Shape:
- Selectively round specific corners to create organic shapes
- border-top-left-radius: 50% creates a curved corner
Complex Asymmetrical Shape:
- Use the advanced syntax border-radius: horizontal / vertical
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates a unique, asymmetrical shape

Example visual output:

+--------------------+
|  Purple shapes    |
|  with creative    |
|  border-radius    |
+--------------------+

Experiment by changing the percentage values and observing how they transform the element's shape.

Summary

In this lab, participants learn how to create rounded corners using CSS border-radius properties through a step-by-step exploration. The lab begins by setting up a basic HTML document with an internal style tag, providing a foundation for CSS styling experiments. Participants start by creating a simple HTML structure and then progressively apply border-radius techniques to div elements.

The learning journey includes applying basic border-radius to create smooth corners, experimenting with different corner radii, and exploring individual corner radius properties. By working through practical examples, participants gain hands-on experience in manipulating element shapes using CSS, understanding how border-radius can transform the visual appearance of web page elements with simple and intuitive styling techniques.