I am interested in creating a border effect using only CSS. Here is an image of the effect I am looking to achieve: https://i.sstatic.net/cKWXZm.jpg
I would like to achieve this effect without adding additional div elements. Any suggestions or tips on how to accomplish this would be greatly appreciated.
EDIT: Corrected image description
Here is a way to achieve this:
.container {
width: 200px;
height: 300px;
border: 20px solid transparent; /* adjust line offset */
outline: 3px solid #000; /* modify outline thickness */
outline-offset: -15px; /* adjust rectangle offset */
background:
conic-gradient(from 90deg at 5px 5px,#0000 25%,#000 0)
0 0/calc(100% - 5px) calc(100% - 5px) padding-box border-box;
}<div class="container"></div>Using CSS variables for easy customization:
.container {
--c:red; /* color */
--b:2px; /* line thickness */
--o1:20px; /* line offset */
--o2:15px; /* rectangle offset */
width: 200px;
height: 300px;
box-sizing: border-box;
display: inline-block;
border: var(--o1) solid transparent;
outline: var(--b) solid var(--c);
outline-offset: calc(-1*var(--o2));
background:
conic-gradient(from 90deg at var(--b) var(--b),#0000 25%,var(--c) 0)
0 0/calc(100% - var(--b)) calc(100% - var(--b)) padding-box border-box;
}<div class="container"></div>
<div class="container" style="--c:green;--b:1px;--o1:25px;"></div>
<div class="container" style="--c:blue;--b:4px;--o1:50px;--o2:25px;"></div>
<div class="container" style="--c:#000;--b:1px;--o1:15px;--o2:0;"></div>Give this a shot:
body {
margin:0;
padding:0;
}
.styled-box {
position: relative;
margin:20px;
padding:20px;
border:2px solid black;
min-height:300px;
}
.styled-box:before {
content:'';
position: absolute;
top:-20px;
bottom:-20px;
left:10px;
right:10px;
border-left: 2px solid black;
border-right: 2px solid black;
}
.styled-box:after {
content:'';
position: absolute;
top:10px;
bottom:10px;
left:-20px;
right:-20px;
border-top: 2px solid black;
border-bottom: 2px solid black;
}<div class="styled-box"></div>Experiment with the use of psuedoelements to create additional rectangles with extra borders.
I am working on an HTML form that includes a dropdown list with four different names to choose from. window.onload = function(){ document.getElementById("submit").onclick = displaySelectedStudent; } function displaySelectedStu ...
My current project involves web scraping a real estate listing platform using Selenium, BS4, and Python. The script works by fetching the links to each listing page before proceeding to parse the HTML content of those pages. One key component is a Chrome E ...
I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...
Seeking assistance and guidance from the community, I have modified code from an online tutorial to allow users to dynamically add rows to a table when data is entered in the row above. However, I am facing an issue where I can only insert one additional ...
Issue in Safari and Chrome browsers: CSS: TABLE { width: 100%; clear: both; border: 0px; border-collapse: collapse; } TABLE TH, TABLE TD { padding: 10px; text-align: center; border: 1px dotted #898989; } ...
I am attempting to transfer an array of checkbox inputs from an HTML page to an initial PHP file which creates a new layout for a page and then calls another PHP file to populate it. However, I am encountering issues with the serialization and unserializat ...
My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...
The response provided by Dr.Molle in a previous post here was accurate, but it only functioned with <div>. I am required to utilize <table>. Though I found a script that works flawlessly outside of my VBScript, it does not work when embedded in ...
Currently, I am facing an issue with keeping my logo/header at the top of the page. I have experimented with CSS properties like position: fixed; z-index: 9999; top: 0; left: 0;, and even tried adjusting the positioning to left: 40%; in an attempt to cente ...
Currently, I am developing a website and I am looking to implement a dropdown submenu on hover using Bootstrap 4.1. Here is the HTML code snippet I have utilized to create the hover dropdown menu: <div class="navbar-collapse text-center" id="navbarRes ...
Currently, I am working on a project where I am using React TypeScript along with Material-UI. The issue that I am encountering is related to the width of the Drawer component provided by Material-UI. By default, the Drawer takes up the entire screen wid ...
Is it possible to display a webpage or an HTML file using JavaFX Scene Builder? Thank you. ...
Of course, I am familiar with media queries and how they allow us to set specific min-width and max-width ranges for CSS changes. However, when I look at the website styledotme.com, I notice that the block/div beneath the navigation bar gradually shrinks ...
Is it possible to adjust the transparency of a background image in HTML? I came across one solution that involved adding a box on top of the background picture and changing the opacity of the box, which in turn changed the opacity of the background pictur ...
When I submit the form, I am only able to retrieve the value of the last combo box. Is there a way to capture all the combo boxes' values? Also, I need to know how to access the value of a label. Below is the code snippet used to generate the list of ...
In an attempt to automate input based on image pairs, I encountered a challenge. On one side, there are two images that need to be matched with input fields, and on the other side, there are corresponding letters for each image to fill in the inputs upon c ...
I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN? ...
I'm facing an interesting issue. I've implemented FancyBox lightbox to showcase a "video" tag when users click on the image thumbnail, and it functions well with all varieties of HTML5 video. The challenge arises when testing in browsers older th ...
Currently, I am working on implementing a brush-like effect on a web page. The task involves providing multiple patterns/textures in the background and allowing users to drag their mouse to create the pattern effect on the page. If you want to see the st ...
I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...