YouTip

# CSS Border CSS border is a property used to define the border style of an element. Borders can be applied to any HTML element to enhance visual effects, separate content, or highlight elements. CSS border properties mainly include border width, border style, border color, and shorthand properties. --- ## CSS Border Properties CSS border properties allow you to specify the style and color of an element's border. Borders on all four sides Red bottom border Rounded border Left border with width, color in blue --- ## Border Style The border style property specifies what type of border to display. The border-style property is used to specify the type of border to display. The allowed values are as follows: - dotted: Defines a dotted border. - dashed: Defines a dashed border. - solid: Defines a solid border. - double: Defines a double border. - groove: Defines a 3D grooved border. The effect depends on the value of border-color. - ridge: Defines a 3D ridged border. The effect depends on the value of border-color. - inset: Defines a 3D inset border. The effect depends on the value of border-color. - outset: Defines a 3D outset border. The effect depends on the value of border-color. - none: Defines no border. - hidden: Defines a hidden border. ### border-style Demonstration: none: No border by default dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. The width of the two borders is the same as the value of border-width groove: Defines a 3D grooved border. The effect depends on the border color value ridge: Defines a 3D ridged border. The effect depends on the border color value inset: Defines a 3D inset border. The effect depends on the border color value outset: Defines a 3D outset border. The effect depends on the border color value [Try it »](#) --- ## Border Width You can specify the width of a border using the border-width property. There are two ways to specify the border width: you can specify a length value, such as 2px or 0.1em (units can be px, pt, cm, em, etc.), or use one of three keywords: thick, medium (default), and thin. **Note:** CSS does not define the specific widths of the three keywords, so one user might set thick, medium, and thin to equal 5px, 3px, and 2px respectively, while another user might set them to 3px, 2px, and 1px. ## Example p.one{border-style:solid; border-width:5 px; }p.two{border-style:solid; border-width:medium; } [Try it »](#) --- ## Border Color The border-color property is used to set the color of the border. Colors that can be set: - name - Specifies the color name, such as "red" - RGB - Specifies the RGB value, such as "rgb(255,0,0)" - Hex - Specifies the hexadecimal value, such as "#ff0000" You can also set the border color to "transparent". **Note:** border-color does not work on its own; you must first use border-style to set the border style. ## Example p.one{border-style:solid; border-color:red; }p.two{border-style:solid; border-color:#98bf21; } [Try it »](#) --- ## Border - Individual Side Settings In CSS, you can specify different borders for different sides: ## Example p{border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } [Try it »](#) The above example can also be set using a single property: ## Example border-style:dotted solid; [Try it »](#) The border-style property can have 1-4 values: - **border-style:dotted solid double dashed;** - Top border is dotted - Right border is solid - Bottom border is double - Left border is dashed - **border-style:dotted solid double;** - Top border is dotted - Left and right borders are solid - Bottom border is double - **border-style:dotted solid;** - Top and bottom borders are dotted - Right and left borders are solid - **border-style:dotted;** - All four borders are dotted The examples above use border-style. However, it can also be used with border-width and border-color. --- ## Border - Shorthand Property The examples above use many properties to set borders. You can also set borders in a single property. You can set the following in the "border" property: - border-width - border-style (required) - border-color ## Example border:5 px solid red; [Try it »](#) --- ## More Examples (#) This example demonstrates how to use the shorthand property to set all four border properties in a single declaration. (#) This example demonstrates how to set the style of the bottom border. (#) This example demonstrates how to set the width of the left border. (#) This example demonstrates how to set the color of four borders. You can set one to four colors. (#) This example demonstrates how to set the color of the right border. (#) This example demonstrates how to set a gradient color border. --- ## CSS Border Properties | Property | Description | | --- | --- | | (#) | Shorthand property for setting all four border properties in one declaration. | | (#) | Sets the style of an element's borders on all four sides, or sets each side individually. | | (#) | Shorthand property for setting the width of all borders of an element, or setting each side individually. | | (#) | Shorthand property for setting the color of all visible borders of an element, or setting the color of each of the four borders individually. | | (#) | Shorthand property for setting all bottom border properties in one declaration. | | (#) | Sets the color of an element's bottom border. | | (#) | Sets the style of an element's bottom border. | | (#) | Sets the width of an element's bottom border. | | (#) | Shorthand property for setting all left border properties in one declaration. | | (#) | Sets the color of an element's left border. | | (#) | Sets the style of an element's left border. | | (#) | Sets the width of an element's left border. | | (#) | Shorthand property for setting all right border properties in one declaration. | | (#) | Sets the color of an element's right border. | | (#) | Sets the style of an element's right border. | | (#) | Sets the width of an element's right border. | | (#) | Shorthand property for setting all top border properties in one declaration. | | (#) | Sets the color of an element's top border. | | (#) | Sets the style of an element's top border. | | (#) | Sets the width of an element's top border. | | (#) | Sets rounded borders. |