CSS Property border-bottom-style

The border-bottom-style property is used to specify the line variety of the bottom border of a component (solid, double, dashed, etc.), unless there’s a border image set.

CSS Property border-bottom-style Value

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

none

Displays no border. Color and breadth assault the border are unheeded. The border breadth price are `0` unless there’s a border image set.In case of table cell and border collapsing, the none price has rock bottom priority: it implies that if the other conflicting border is about, it’ll be displayed.

hidden

Similar to none, it displays no border. Color and breadth attack the border are going to be unheeded. The border breadth price are going to be `0` unless there’s a border image set.In case of table cell and border collapsing, the hidden price has the best priority: it implies that if the other conflicting border is ready, it won’t be displayed.

dotted

Displays a border as a set of rounded dots. The radius of the dots is equal to half of the width of the border.

dashed

Displays a border as a series of square-ended dashes.

solid

Displays a border as a solid straight line.

double

Displays 2 parallel solid lines with some house between them. The thickness of the lines isn’t nominal, however the total of the lines and therefore the house should capable worth|the worth} of the border-bottom-width property’s value.

groove

The displayed border appearance as if it were carven within the canvas. this can be usually achieved by making a “shadow” from 2 colours that ar slightly lighter and darker than the colour nominal victimisation the border-bottom-color property.

ridge

The border looks as if it were coming out of the canvas in a 3D effect. It is the opposite of the effect achieved by the groove value.

inset

Displays a border that makes the element look as if it is “sunken” or embedded into the page. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.

outset

Displays a border that creates the part look as if it’s decorated with a 3D impact. it’s the alternative of the impact achieved by the inset property. When applied to a table cell with border-collapse set to folded, this price behaves like ridge.

Desktop Browser Support

Mobile Browser Support

Examples

.class{
    border-bottom-width: 10px;
    border-bottom-color: red;
    border-bottom-style: dashed;
    border-bottom-style: inset;
    border-bottom-style: dotted;
}
Leave a Reply