Give #input a 6px border radius.
Acceptance criteria
- 1.Give #input a 6px border radius.
CSS Tutorial · CSS Lists, Tables & Forms
These 10 tasks go with the CSS Input Fields chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “CSS Input Fields are styled using CSS to improve the appearance and usability of form input elements.” Read the chapter.
1.Round the fieldexercise · easy · 10 min
Give #input a 6px border radius.
Passes when: Give #input a 6px border radius.
2.Size the fieldexercise · easy · 10 min · practice plan
Make #input 240px wide.
Passes when: Make #input 240px wide.
3.Colour the caretexercise · easy · 10 min · practice plan
Make the text cursor in #input blue.
Passes when: Make the text cursor in #input blue.
4.Add a visible outlineexercise · easy · 10 min · practice plan
Give #input a 2px solid navy outline.
Passes when: Give #input a 2px solid navy outline.
5.Build a comfortable fieldexercise · medium · 10 min · practice plan
16px text, 10px padding, 6px radius.
Passes when: 16px text, 10px padding, 6px radius.
6.Fix the missing unitbug fix · easy · 8 min
A border radius needs a unit.
Passes when: A border radius needs a unit.
7.Fix the wrong propertybug fix · easy · 8 min · practice plan
An element's width is set with width.
Passes when: An element's width is set with width.
8.Fix the caret propertybug fix · easy · 8 min · practice plan
The text cursor colour is caret-color.
Passes when: The text cursor colour is caret-color.
9.Fix the outline with no stylebug fix · easy · 8 min · practice plan
An outline needs a style to be drawn.
Passes when: An outline needs a style to be drawn.
10.Fix the tiny textbug fix · easy · 8 min · practice plan
Fields below 16px cause zooming on mobile.
Passes when: Fields below 16px cause zooming on mobile.
Between them these tasks cover Sizing inputs, Rounded fields and Caret and outline.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.