- Instant help with your CSS coding problems

Set border for HTML element

Snippet added on Dec 14, 2020 by Mike

Question:

How to set border for HTML element?

Answer:

.bordered-item {
  border: 1px solid #f1a151;
}

Description:

The border shorthand CSS property sets an element's border. It sets the values of border-width , border-style , and border-color .

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

Outlines never take up space, as they are drawn outside of an element's content.
According to the spec, outlines don't have to be rectangular, although they usually are.

Reference:

The CSS border reference

Share "How to set border for HTML element?"

Related snippets:

Tags:

border shorthand, border width, border style, border color

Technical term:

Set border for HTML element

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

Remove focus border around input element Create endless rotation animation in CSS How to use !important in TailwindCSS Center an absolute element in TailwindCSS Add class to child when hovering on parent in TailwindCSS Add a box shadow to only one side of an element Add text shadow with Tailwind CSS Add dots if text is too long Create a neon effect with TailwindCSS Access child elements in TailwindCSS Change bullet size in HTML Select the nth child in TailwindCSS Force line break in a long word using CSS Select first child in TailwindCSS How to use calc() in TailwindCSS Use emoji instead of list style How to use CSS variables in TailwindCSS Create horizontal rule with text using TailwindCSS Using :not in TailwindCSS Create blinking background with TailwindCSS

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Check if an array contains a value Extract a substring from a string in PHP Fix the React 18: Hydration failed because the initial UI does not match error Use IF statement in MySQL Toggle word wrap in VS Code Access JavaScript object property with space Check if string contains a specific character using JavaScript Convert string to character array in JavaScript Generate UUID in JavaScript Play video in fullscreen with vanilla JavaScript convert number to string in JavaScript Compare two files in VS Code Get same day in the next week in PHHP Backup MySQL schema only Generate random string with PHP Set X-Content-Type-Options in Apache Get the first Monday of a month in Java Split a string into words

Interesting things

OpanAi's ChatGPT