CSS: Borders & Border Radius

Border Properties

CSS provides several properties to style borders:

• border-width: Sets the width of the border (e.g., 1px, 5px).
• border-style: Defines the style of the border (e.g., solid, dashed, dotted, double, none).
• border-color: Specifies the color of the border.
• border: A shorthand property to set width, style, and color.

Border Radius

The border-radius property allows you to create rounded corners:

• border-radius: Sets the radius of the corners (e.g., 10px, 50%).

Example: Borders & Border Radius

/* Example */
div {
    border: 2px solid #000;
    border-radius: 10px;
}
        

This example creates a box with a solid black border and rounded corners.

Practice

Try experimenting with border properties:

• Change the border-style to dashed or dotted.
• Use border-radius to create circular elements.
• Combine border and background for creative designs.

Continue Learning

• Next: CSS Layout