I'm attempting to achieve the design below (with a 1 pixel gap on each end):
I'm attempting to achieve the design below (with a 1 pixel gap on each end):
Experiment with the following code snippet:
<hr class="fancy">
Utilize the accompanying CSS for styling:
hr.fancy {
border: 1px solid black;
border-width: 1px 0px;
color: black;
height: 5px;
position: relative;
}
hr.fancy:after {
content: '\A';
position: absolute;
bottom: -1px;
right: 0px;
display: block;
width: 1px;
height: 7px;
border-left: 1px solid white;
}
hr.fancy:before {
content: '\A';
position: absolute;
bottom: -1px;
left: 0px;
display: block;
width: 1px;
height: 7px;
border-right: 1px solid white;
}
View it in action here: http://jsfiddle.net/audetwebdesign/P7umD/
You can adjust the pixel values to achieve a more prominent appearance.
Cross-Browser Compatibility
Testing has shown consistent rendering in Firefox and Chrome.
However, please note that this technique may not be effective in IE9 where only double lines are displayed without the decorative ends.
Perhaps utilizing the border-image property could be the solution for your design needs.
Explore more about CSS border images at W3Schools.
For a different approach, consider using a div-based solution like this:
<div class="border">
Content
<div class="left"></div>
<div class="right"></div>
</div>
.border {
border-width:0px;
border-style: double;
border-color: grey;
border-bottom-width: 3px;
position: relative;
}
.left,
.right{
position: absolute;
width: 1px;
height: 3px;
bottom: -3px;
background-color: white;
}
.left {
left: 1px;
}
.right {
right: 1px;
}
Check out this helpful demo on JSFiddle: http://jsfiddle.net/zCEKp/
If you're looking for a pure CSS solution, this might be what you need:
Here is the HTML markup:
<div class="customdivider">
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
</div>
And here is the corresponding CSS:
.customdivider {
clear: both;
}
.customdivider .left {
border-bottom: double black;
width: 1px;
float: left;
}
.customdivider .middle {
border-bottom: double black;
width: 50px;
float: left;
margin: 0 1px 0 1px;
}
.customdivider .right {
border-bottom: double black;
width: 1px;
float: left;
}
This is how it will look once implemented:
http://jsfiddle.net/Lucidus/ZjGpS/1/ [edit: corrected the CSS in the previous link]
Is this the design you're looking for?
Check out the HTML code snippet below:
<div class="box">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
And here's the CSS styling:
.box{
position:relative;
border:3px double;
width:100px;
height:50px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
position:absolute;
width:4px;
height:4px;
border-left:1px #fff solid;
border-right:1px #fff solid;
}
.top-left, .top-right{
top:-4px;
}
.top-left, .bottom-left{
left:-4px;
}
.top-right, .bottom-right{
right:-4px;
}
.bottom-left, .bottom-right {
bottom:-4px;
}
For a live demo, you can visit this jsFiddle link.
How can I add an onclick attribute using jQuery that is compatible with IE7? So far, the following code works in browsers other than IE8 and Mozilla: idLink = Removelst(); var newClick = new Function(idLink); $(test1).attr('onclick', null).clic ...
In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...
My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...
Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...
After launching my blog on Google's Blogger, I wanted to add a unique touch by incorporating a static 5-star rating system in my Books I Read Section. I thought about using CSS to customize each book post and display anywhere from 1 to 5 stars for vis ...
Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...
I am facing an issue with a loop that iterates 3 times. In the loop, there's an HTML form containing radio buttons and I am processing the input using PHP. However, when echoing the form data, it does not display the correct values. Is there something ...
I'm having trouble changing the font-family using CSS with jQuery's "jMenu" plugin. Here is the CSS I currently have: .jMenu{ position : absolute; top : 80px; left : 0px; width : 100%; display:table; margin:0; padding ...
I am facing an issue with the layout of my third child element. Instead of appearing below the first two children, it is wrapping around to the bottom of the container. Can anyone explain why this is happening and suggest a solution? Even though I have se ...
Hey there! I am new to CSS animation and currently working on a project where I need to slide in a div element and then slide it out of the screen using keyframes in Next.js. The sliding in part is working perfectly fine, but I'm facing some issues wi ...
I have implemented a radio button (Yes, No) and an input text box on my form. If the user selects 'No', the input field is disabled and jQuery triggers a change event for AJAX form submission. $('#form-id').change(function(){ .... }); ...
I have encountered an issue with my gallery where the images stack once the window is resized. Is there a way to ensure that the layout remains consistent across all screen sizes? <div class="container"> <div class="gallery"> &l ...
I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...
My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...
I am in search of two divs with the following styles: <div style="height:20px;" /> <div style="height:100%;" /> These divs result in one being 20px tall and the other spanning 100% of the screen height, causing a vertical scrollbar that is eq ...
I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...
I am currently using a datepicker that looks like this: When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: function (scope, element, attr, ngModel ...
I keep encountering an issue in the Atom text editor where it says "Cannot find module 'editorconfig'" every time I try to save a .html file. Even though I had previously installed the EditorConfig package without any problems. How can I resolve ...
I am facing an issue with my web app for mobile devices where I am trying to display the mobile camera using Firefox mobile browser. I am using nodejs with express as a server and connecting to the server via localhost with my smartphone. Although Firefox ...
Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...