Assigning a border color to an HTML element allows you to customize the visual appearance of that element. There are a few different ways to set a border color depending on whether you want to use HTML attributes, CSS properties, or a combination of both.
In HTML, you can set a border color by using the border attribute on an element. This sets a border around all four sides of that element. However, the border attribute is not recommended anymore in modern web development.
In CSS, you have more flexible options for styling borders. You can target specific sides of an element for a border with properties like border-top-color, border-right-color, etc. You can also set a shorthand border-color property that will set the color for all four sides at once.
When using CSS, you also have the option of putting the border styles in a dedicated CSS stylesheet file rather than directly in the HTML. This separates the presentation styling from the HTML structure for better maintainability.
Setting a Border Color with HTML Attributes
To set a border color with HTML, you use the border attribute on the element you want to have a border.
This will render a red border on all sides of the div element.
The value for the border attribute contains three parts:
– The width of the border (e.g. 1px)
– The style – solid, dotted, dashed, etc.
– The color of the border
You can also set the border attribute with a single color value like:
This will render a solid red border of default thickness (usually 1px).
Some key points about using the HTML border attribute:
– It sets the border on all four sides of an element (you can’t target individual sides)
– The color option is limited to predefined color names
– It’s best to avoid and use CSS borders instead for more flexibility
While convenient for simple cases, the HTML border attribute lacks the full customization options you get with CSS.
Setting Border Color with CSS
To set a border color with CSS, you use the border-color property or one of its side-specific variants like border-top-color.
Here are some examples:
/* Set border color on all sides */
/* Set border color on one side */
The border-color property allows a few different types of values:
– Named color values like red, green, blue, etc.
– Hexadecimal color codes like #FF0000
– RGB/RGBA values like rgb(255, 0, 0) or rgba(255, 0, 0, 0.5)
– HSL/HSLA values like hsl(0, 100%, 50%) or hsla(0, 100%, 50%, 0.5)
This gives you many more options compared to the HTML border attribute.
Some advantages of using CSS for borders:
– You can target individual sides (top, right, bottom, left)
– You have more color options like hex codes, rgb/rgba, etc.
– You can specify other styles like solid, dotted, dashed, double, etc.
– Border styles can be in an external CSS file for better organization
Setting All Border Properties Shorthand
Rather than setting the border color, style, and width individually, you can combine them in the shorthand border property.
border: 1px solid red;
This sets the width, style, and color all in one.
The border property is specified in this order:
2. border-style (required)
Omitting the border color will use the default color, usually black.
This shorthand approach is commonly used to set all border properties at once while keeping the code concise.
Combining HTML Attributes and CSS
You can also combine HTML attributes and CSS together. For example:
Here the HTML sets a starting border, while the CSS overrides the color making it red.
When both are present, CSS will take priority over HTML attributes.
This can be used to have a default border in HTML, while customizing certain aspects like color with CSS overrides.
Border Color on Specific HTML Elements
Certain HTML elements have default border colors you should be aware of when modifying borders:
–– Black borders separating table cells
– – Blue border often displayed when there is no src image