Prelims - CSS borders

Question 1

properties that allow you to specify the style, width, and color of an element’s border

Answer 1

CSS border

Question 2

property specifies what kind of border to display

Answer 2

border-style

ex. p.dotted {border-style: dotted;}

Question 3

The following border values are allowed:

Answer 3

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

Question 4

property specifies the width of the four borders

Answer 4

border-width

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Question 5

The border-width property can have from one to four values

Answer 5

top, right, bottom, left

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

Question 6

property is used to set the color of the four borders

Answer 6

border-color

Question 7

The border color can be set by

Answer 7

• name - specify a color name, like “red”
• HEX - specify a HEX value, like “#ff0000”
• RGB - specify a RGB value, like “rgb(255,0,0)”
• HSL - specify a HSL value, like “hsl(0, 100%, 50%)”
• transparent

If border-color is not set, it inherits the color of the element

Question 8

The border-color property can have from one to four values

Answer 8

top, right, bottom, left

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Question 9

In CSS, there are also properties for specifying each of the borders

Answer 9

border-top-style
border-right-style
border-bottom-style
border-left-style

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Question 10

The border property is a shorthand property for the following individual border properties:

Answer 10

border-width
border-style (required)
border-color

p {
  border: 5px solid red;
}

Question 11

property is used to add rounded borders to an element

Answer 11

border-radius