CSS Borders

Summary

• border: 1px solid red - border width - border style - border color
• border-radius: 1em - Bo góc cho border
• border-image-* - Làm đẹp border với image

Borders

• border-style
  • dotted, dashed, solid, groove, inset, double, ridge, outset
  • Có thể set style cho từng cạnh bằng border-top-style, …
• Shorthand: border: 1px solid red; - width, style, color
• Color: Set color for border (có thể set cho từng border side)
• Width:
  • Ngoài cách set bằng số 1em/ 1px, ta có thể sử dụng: think/ thick/ medium
  • Tương tự như color, ta có thể set width cho từng side (border-top-width)
• CSS Logical Properties cũng có thể áp dụng vào border. Eg: border-inline-end: 2px solid red
• Border Radius: Rounded corners
  • Ta có thể round 4 góc của border với radius khác nhau
    • border-radius: 1em
    • border-radius: 1em 2em 3em 4em
    • border-top-left-radius: 1em 2em
    • Define giá trị elip: border-radisu: 95px 155px 148px 103px / 48px 95px 130px 203px;
• Border image source: Source/ Draw function
  • border-image-source: url('path/to/image.png');
  • border-image-source: linear-gradient(to bottom, #000, #fff);
• border image slide: allows you to slice an image into 9 parts, made up of 4 split lines
• border-image-repeat: how you instruct CSS how you would like your border image to repeat