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.