How CSS browsers determine which exact colors to use to set borders: inset or outset
How CSS Browsers Determine Which Exact Colors to Use for Borders: Inset or Outset
In this article, we’ll look at how the inset and outset styles of the border property in CSS are calculated, and explain how browsers determine which exact colors to use.
Read more: CSS Tutorial
Color Calculation for border:inset and border:outset
In CSS, we can use the border property to set the style of an element’s border. The border:inset and border:outset styles can make the border appear more three-dimensional.
The border:inset style makes the border appear to be recessed, while the border:outset style makes it appear to protrude from the element.
These two effects are achieved by how browsers calculate colors. Specifically, browsers determine the border color based on the element’s background color and the border style.
Rules for how browsers calculate border color based on background color and border style
Browsers use certain rules to determine border color. These rules are typically defined by the CSS specification.
- If an element has no background color set, or if the background color is transparent, the browser defaults to using a transparent color for the border. This prevents the border from being visible, making it appear as if there is no border.
For example, in the following CSS code, the background color of the element is set to transparent, so the border is transparent, making it appear as if there is no border.
.element { background-color: transparent; border: 1px solid #000; } - If the element’s background color is opaque, the browser uses the border’s style to calculate the border’s color.
- For the border:inset style, the browser uses a calculated method to determine the border’s color. Specifically, the browser creates a light/dark gradient based on the background color and a gradient around the border, making the border appear to be recessed.
-
For the border:outset style, the browser also uses a calculated method to determine the border’s color. Specifically, the browser creates a light/dark gradient based on the background color and a gradient around the border, making the border appear to be protruding from the element.
Example Description
Here is an example demonstrating how the browser determines the border color for border:inset and border:outset styles:
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 200px;
height: 200px;
background-color: #ccc;
border: 1px solid;
margin: 10px;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
</style>
</head>
<body>
<h2>border:inset style</h2>
<div class="element inset">This is an element with inset border style</div>
<h2>border:outset style</h2>
<div class="element outset">This is an element with an outset border style</div>
</body>
</html>
In the example above, we created two elements, one with the border:inset style and the other with the border:outset style. We set the same background color, #ccc, for both elements to see how the browser calculates the border color based on the background color.
Notice that because the browser calculates the border color based on the background color, the border color for the border:inset style appears darker, as if it’s recessed; while the border color for the border:outset style appears lighter, as if it’s protruding from the element.
Summary
Through this article, we learned how border color is calculated for the border:inset and border:outset styles in CSS. We learned that browsers determine the border color based on the element’s background color and border style, creating a three-dimensional border effect. If you want flexible border color control, you can achieve this by setting the element’s background color and border style.