Lesson 7 of 15

Borders

CSS Borders

The border shorthand sets width, style, and color:

border: 2px solid #3b82f6;

Border styles: solid, dashed, dotted, double, none

Individual sides:

border-top: 3px solid red;
border-right: 1px dashed gray;
border-bottom: none;

Rounded corners with border-radius:

border-radius: 8px;         /* all corners */
border-radius: 50%;          /* circle */
border-radius: 8px 0 8px 0;  /* top-left, top-right, bottom-right, bottom-left */

Outline is like border but outside the box model (doesn't affect layout):

outline: 2px solid blue;
outline-offset: 4px;

Your Task

Create elements with a solid border, a dashed border, and rounded corners.

CSS preview loading...
Loading...
Click "Run" to execute your code.