Yann LeCun raises $1B to build AI that understands the physical world

Adding borders to elements in CSS is a fundamental skill for enhancing the visual appeal and structure of your web pages. The `border` property is the primary tool for this, allowing you to control the **style**, **width**, and **color** of an element's border in a single declaration. ### The `border` Shorthand Property The most common way to add a border is using the `border` shorthand property. Its syntax is straightforward: ```css border: [width] [style] [color]; For example, to add a 2-pixel solid black border around an image: ```css img { border: 2px solid black; } You can also define each aspect of the border separately for more granular control: - `border-width`: Sets the thickness (e.g., `1px`, `0.5em`, `thin`). - `border-style`: Defines the line style (e.g., `solid`, `dashed`, `dotted`, `double`, `groove`). - `border-color`: Specifies the color (using named colors, HEX, RGB, or HSL values). ### Applying Borders to Specific Sides CSS provides precise control, allowing you to add borders to individual sides of an element using these properties: - `border-top` - `border-right` - `border-bottom` - `border-left` Each follows the same `[width] [style] [color]` syntax. For instance, to add a decorative underline to a heading: ```css h2 { border-bottom: 4px dashed #ff6b6b; } ### Common Border Styles and Use Cases The `border-style` property offers a variety of visual options: - **`solid`**: A continuous line. Ideal for buttons and containers. - **`dashed`**: A series of dashes. Useful for indicating inactive areas. - **`dotted`**: A sequence of dots. Often used for subtle separators. - **`double`**: Two parallel lines. Creates a more formal, framed effect. - **`groove`**: A 3D grooved effect, depending on the border-color. ### Practical Tips and Best Practices 1. **Use with `border-radius` for Rounded Corners**: Combine `border` with the `border-radius` property to create softened edges and modern, friendly UI components. ```css .button { border: 2px solid #4ecdc4; border-radius: 8px; } 2. **Remember the Box Model**: A border adds to the total dimensions of an element. If you have an element with a defined `width` and `height` of 100px and add a `5px` border, its total rendered size becomes 110px by 110px. Use `box-sizing: border-box;` to include the border and padding within the element's specified width and height. 3. **Transparent Borders for Stable Layouts**: Sometimes, you might add a `transparent` border as a placeholder to prevent layout shifts when a border is added or removed on user interaction (like `:hover`). Mastering CSS borders is a key step in creating visually engaging and well-structured websites. Experiment with different styles, widths, and colors to see how they can enhance your design. and wrapping it in a div with class="faq-section". You may not use markdown. Do not use any extra HTML tags except for the div and question formatting. Answer to each question should be in a paragraph.