CSS border-color Property

CSS accent-color Property

Last Updated : 16 Oct, 2024

The accent-color property in CSS specifies the color of user interface elements and controls, such as checkboxes, radio buttons, range sliders, and progress indicators. This property allows for enhanced customization of form controls to match the design of your website.

Syntax:

accent-color: auto | <color> | initial | inherit;

Property Value:

auto: It represents the UA-chosen color that will set the accent color for the control elements.
<color>: It specifies the color for an accent color in RGB representation, hex representation, and also with the color name.
initial: It sets the accent-color property to its default value. The default value of this property is auto.
inherit: It inherits this property from its parent component.

Examples of CSS accent-color Property

Example 1: The following code demonstrates the accent-color property of CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS accent-color Property</title>

    <style>
        h1 {
            color: green;
        }

        input {
            width: 30px;
            height: 30px;
        }

        .accent {
            accent-color: red;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h3>CSS accent-color Property</h3>

        <input type="checkbox" name="">
        <input type="checkbox" name="" class="accent">

        <input type="radio" name="">
        <input type="radio" name="" class="accent">
    </center>
</body>

</html>

Output:

Example 2: Using accent color as red with input range field

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS accent-color Property</title>

    <style>
        h1 {
            color: green;
        }

        .accent {
            accent-color: red;
        }

        input,
        progress {
            width: 300px;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h3>CSS accent-color Property</h3>

        <input type="range" name="">
        <br>
        <input type="range" name="" class="accent">
        <br>

        <progress>Abc</progress>
        <br>
        <progress class="accent">Abc</progress>
    </center>
</body>

</html>

Output:

Supported Browsers

Google Chrome 93
Firefox 92
Safari 15.4
Opera 79
Edge 93

CSS border-color Property

B

blalverma92

Improve

Article Tags :

Similar Reads

CSS caret-color Property

This property is used to set the color of the cursor in inputs, text areas, or other editable areas.Default Value: autoSyntax: caret-color: auto|color;Property values: auto: It has a default value. It uses the current-color in the web browser.color: It is used to specify the color value used for the

CSS color Property

The color property is used to specify the text color. It accepts color values as color name, HEX, RGB, RGBA, HSL, or HSLA values. This property plays a crucial role in defining text appearance, ensuring readability, and enhancing the overall design aesthetics of web content.Syntaxcolor: color | init

CSS color-adjust Property

The Color-adjust property has proved itself to be useful when it comes to printing documents. The browsers can change the colors and the appearance of the element so as to prevent that color-adjust property is used. Syntax: color-adjust: economy | exact Property values: economy: In this, the browser

CSS background-color Property

The background-color CSS property sets the background color of an element, allowing you to create a solid color backdrop. You can define the color using named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA. This property applies to both the content and padding areas of the element.By using the

CSS border-color Property

The CSS border-color property allows developers to define the color of an element's border, enhancing the visual design of a webpage. It works in conjunction with the border property to provide control over the appearance of borders using various color values like-named colors, hex codes, or RGB val

CSS | border-block-color Property

The border-block-color property in CSS is used to set the individual logical block border-color property values in a single place in the style sheet. It sets the border color top, and bottom of the defining border element. Syntax: border-block-color: color; Property values: color: This property hold

Primer CSS Alerts Color

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by

CSS border-top-color Property

border-color property is used to color all borders of the container with the same color.Â border-top-color property provide option to fill different color from parent border-color to top border of the container.Note: Take care of order while writing the statement in CSS, i.e CSS will take last value

CSS border-bottom-color Property

The CSS border-bottom-color property is used to set the color of the bottom border of an element. It is mandatory to declare the border-style or border-bottom-style property before using the border-bottom-color property always as there must exist a border first before we change its color.The current

CSS border-left-color Property

The border-left-color Property is used to set the color of the left-border in an Element. It is mandatory to declare the border-style or the border-left-style property before the border-left-color property. Syntax:border-left-color: color|transparent|initial|inherit; Property Valuescolor: It sets th