AvraamMavridis/3-hidden-css-tips.md

## 3-hidden-css-tips.md

      
    Raw
  

              3-hidden-css-tips.md
            
          
    3 hidden CSS tips

1. Use empty-cells to style table empty cells:
Surprisingly the browser support is quite good and extends back to IE8.
Convenient to give less visual predominance to empty cells.
table {
  empty-cells: hide;
}
2. border-radius can be made non-symmetric:
In short you can define the horizontal and vertical radius independently.
This gives room for interesting shapes. The left part of the slash is the horizontal radius, the right part is the vertical radius.
.custom-round {
  border-radius: 15px 15px 15px 10px / 5px 5px 20px 5px;
}
3. Use pseudo-elements to style the first letter and line:
No need to resort to another element to wrap the first letter or line of a <p> to style them differently:
p::first-letter {
font-size: 2rem;
}

p::first-line {
font-weight: 600;
}