Hairlines / Borders

All hairlines (thin borders) are made with :after and :before pseudo elements instead of usual CSS borders. This method allows to have true 0.5px (for iOS Retina) and 0.33px (for iPhone X/Plus) hairlines

The rule is simple:

  • “bottom” and “right” hairlines are made using :after pseudo elements
  • “left” and “top” hairlines are made using :before pseudo elements

So, for example, if you want to change navbar’s bottom hairline color, you need to change background-color of :after element:

  1. .navbar:after {
  2.   background-color: #ff0000;
  3. }

To remove bottom hairline on navbar and top hairline on toolbar:

  1. .navbar:after {
  2.   display:none;
  3. }
  5. .toolbar:before {
  6.   display:none;
  7. }

no-hairline Class

This helper class can be used to remove hairline. Currently it is supported on Navbar, Toolbar, Subnavbar, Searchbar, Card and its elements (card header, footer).

To remove hairline from navbar:

  1. <div class="navbar no-hairline">
  2.     ...
  3. </div>

no-hairlines Classes

  • no-hairlines class on List View and Content Block to remove outer hairlines.
  • no-hairlines-md does the same but only for MD theme.
  • no-hairlines-ios does the same but only for iOS theme.
  • no-hairlines-between class on List View to remove hairlines between list items.
  • no-hairlines-between-md does the same but only for MD theme.
  • no-hairlines-between-ios does the same but only for MD theme.
  1. <!-- remove outer hairlines -->
  2. <div class="list no-hairlines">
  3.   ...
  4. </div>
  6. <!-- remove hairlines between items -->
  7. <div class="list no-hairlines-between">
  8.   ...
  9. </div>
  11. <!-- remove hairlines between items -->
  12. <div class="list no-hairlines-between">
  13.   ...
  14. </div>
  16. <!-- remove hairlines between items only for MD theme -->
  17. <div class="list no-hairlines-between-md">
  18.   ...
  19. </div>

Hairlines CSS Variables

If there is a CSS variable available for hairline/border color, it can be set to transparent, instead of removal. For example to remove (make transparent) List Item hairlines, we may just specify:

  1. :root {
  2.   --f7-list-item-border-color: transparent;
  3. }