bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Rounded Borders

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Rounded Borders?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 2px solid red;
3Order

Put the learning moves in the order that makes the concept easiest to apply.

The border-radius property is used to add rounded borders to an element:
All CSS Border Properties
CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example

Formatted code
p {
  border: 2px solid red;
  border-radius: 5px;
}

Live preview

All CSS Border Properties

PropertyDescription
borderSets all the border properties in one declaration
border-bottomSets all the bottom border properties in one declaration
border-bottom-colorSets the color of the bottom border
border-bottom-styleSets the style of the bottom border
border-bottom-widthSets the width of the bottom border
border-colorSets the color of the four borders
border-leftSets all the left border properties in one declaration
border-left-colorSets the color of the left border
border-left-styleSets the style of the left border
border-left-widthSets the width of the left border
border-radiusSets all the four border-*-radius properties for rounded corners
border-rightSets all the right border properties in one declaration
border-right-colorSets the color of the right border
border-right-styleSets the style of the right border
border-right-widthSets the width of the right border
border-styleSets the style of the four borders
border-topSets all the top border properties in one declaration
border-top-colorSets the color of the top border
border-top-styleSets the style of the top border
border-top-widthSets the width of the top border
border-widthSets the width of the four borders

Previous

CSS Shorthand Border Property

Next

CSS Margins