Adjust the outline offsets independently for every side

When working with CSS, it's possible to adjust the outline width using the code outline: 1px solid red, and tweak its offset (similar to padding) with outline-offset: 5px.

Unfortunately, this approach lacks the simplicity of the shorthand method used by padding, such as border: 1px 2px 3px 4px, and doesn't offer an outline-offset-left: 1px option.

So, is there a way to customize different offsets on each side for a CSS outline? I want to avoid using padding since it would alter the outlines as desired but add unnecessary space to elements where it's not needed - defeating the purpose of using outline in the first place.

htmlcssborderpaddingoffset

Answer №1

If you're looking to achieve a specific effect, there's a neat trick that can help. However, keep in mind that it may need to be implemented on a case-by-case basis.

In my situation, I had content with padding that contained various HTML elements, including links. Consider this SCSS snippet:

.container {
  padding: 15px;
  > a {
    padding: 8px 0;
  }
}

When focusing on a link, the outline was too close to the text and didn't look great. Adding left/right padding to the links just for the outline would disrupt the layout, causing them to no longer align properly with other elements like headings, paragraphs, or images within the container.

To tackle this issue, I added padding to the links and countered it with a negative margin:

> a {
  margin: 0 -4px;
  padding: 8px 4px;
}

This approach gave me control over how the focus state appeared. While there are some scenarios where this method may not work (e.g., if the links have a background color), it generally works well for most cases.

Answer №2

As per the documentation on Outlines by MDN, the outlined properties to be configured are limited to:

  • outline-style
  • outline-width
  • outline-color

The shorthand outline combines these attributes into a single declaration. However, there is no provision for specifying side orientations, as explained below:

Outlines can take non-rectangular forms. While they are typically rectangular in Gecko/Firefox, Opera may render outlines with non-rectangular shapes...

Given this variability in shape, it wouldn't be logical to assign directional properties like left, top, etc...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to extract the value from an anchor element?

To retrieve the value from an input tag, we can use <id>.value like this: <input type="text" #solutionInput (keyup)="0"><br> <solutionDetail [solutionName]="solutionInput.value" > </solutionDetail> Here, 'solutionInput& ...

htmlangular

The event 'deviceorientation' does not seem to be firing in iOS browsers when it is referenced within an iFrame

I am currently working on a website that features a "360 panorama viewer" embedded within an iframe. The source page utilizes JavaScript and window.DeviceOrientationEvent to determine if the user is browsing on a mobile device with orientation functionalit ...

javascripthtmliosiframe

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

Here is the HTML code to consider. The term 'response' was modified to 'reason', by removing 'sp' (<del> tag) and adding 'as' (<ins> tag), while also removing 'se' (<del> tag). <div &g ...

javascriptc#jqueryhtmlhtml-agility-pack

Creating input fields using Vuejs

Currently, I am learning how to incorporate HTML content rendering in Vuejs. I'm experimenting with creating a small input component that is generated through the render function. Here is a snippet of what I have so far: export default { name: &qu ...

javascripthtmlvue.jsvuejs2vue-component

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards? detail.component.html <div class="card card-outline-info" > <div class="card-header bg-info"><h5 ...

cssangulartwitter-bootstrap-4

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...

htmlcssangularclassng-style

Neatly incorporating a checkbox into a miniaturized image

I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned ...

htmlcss

Caution: The file_get_contents function call cannot be processed as the filename is missing

Every time I attempt to upload an image, I encounter the following error: Warning: file_get_contents(): Filename cannot be empty Here is the code causing the issue: <?php $ImageName = $_FILES["file"]["name"]; $ImageType = $_FILES["file"]['type&a ...

phphtmlmysqlfile-upload

NextJS with the added option of customizable CSS styling

I'm having trouble getting my custom CSS library to work with my components in NextJS. I'm attempting to import my custom CSS file in my components, but it doesn't seem to be working. import React from 'react' import '../../s ...

cssreactjsnext.jsjsx

Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag. However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2). Is there a way to ach ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

The static background and fixed header are locked in a perpetual battle

I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...

htmlcss

Ensuring H1 Header and Regular Text Are Aligned on the Same Line

Is there a way to place a H1 header and regular text side by side on a single line with a line underneath them? Here is what I have attempted so far: This code snippet was my attempt, however, it did not produce the desired result. Can you point out what ...

htmlcss

Styling TD with CSS for bottom border

Is there a way to adjust the bottom border of a TD element in CSS? The image provided demonstrates the desired effect, but with a slight overhang. I need the border to align perfectly with the width of the blue cell above it. https://i.sstatic.net/OXhJu.j ...

htmlcss

Error sound produced when detecting KeyCode on the keyboard

I'm currently working on a JavaScript project that involves capturing keyboard input. However, I'm encountering an issue where every time the user presses a key, it triggers an error sound. Is there a way to disable this sound? ...

javascripthtmlkeyboardaudiokeycode

Tips on how to adjust the HTML5 input type attribute in ios 5 to display the current date and time

I attempted the solution that seemed most straightforward, but unfortunately it didn't yield the desired outcome... const element = document.getElementById("element-id"); element.value = new Date().toString(); The code requires a string input, but h ...

javascriptioshtml

Having trouble finding rows to manipulate in an HTML table generated using jQuery csvToTable?

As a beginner in programming, I find myself seeking assistance with a particular issue. I have successfully read a CSV file stored locally and transformed it into an HTML table using jQuery csvToTable http://code.google.com/p/jquerycsvtotable/. Additional ...

jqueryhtmlhtml-tabletablesorterimport-from-csv

The content inside the HTML body doesn't fully encompass the dimensions of the mobile screen

I am working on making my application flexible by using 100vw width and 100vh height for the components. Everything displays perfectly in any resolution on a computer browser, but when viewed on a mobile device, an empty background is drawn below the bod ...

htmlcssfrontend

Arrange Raphael Objects in Their Relative Positions

I've been experimenting with Raphael.js recently and I've encountered an issue related to the positioning of each Raphael object. My goal is to create multiple 'canvases' without having them overlap within a predefined div on the page. ...

javascripthtmlcsssvgraphael

"Clicking on the 'View More' button within a foreach loop is only functional for the

I am trying to iterate through a list of items using a foreach loop, and each item has a "view more" option. The intention is that when I click on this option, it should expand to show more details about the respective item. However, I am encountering an i ...

htmlasp.net-mvc