One-line decorative border design

I'm experiencing an issue with a PNG image that I want to use as a border-image. The image is 10px x 1px in size, but when I try to use it, it only appears in the corners and doesn't repeat across the entire border. Can anyone help me figure out what I'm doing wrong?

#border {
  width: 200px;
  height: 100px;
  border: 1px dashed transparent;
  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 100% repeat;
  background: yellow;
  text-align: center;
  line-height: 100px;
}
<div id="border">
  bordered area
</div>

htmlcss

Answer №1

Incorrect beginning, the correct value is 0 instead of 100 

  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 0% repeat;

Answer №2

The value you have assigned to 100% is for the border-image-width property. I believe you intended it to be 1 (or you can leave it blank as it defaults to 1).

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#border {
width:200px;
height:100px;
border:1px dashed transparent;
border-image: url(https://image.ibb.co/byABRJ/border.png) 1 1 repeat;
background:yellow;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div id="border">
bordered area
</div>
</body>
</html>

Source: https://www.w3schools.com/cssref/css3_pr_border-image.asp

EDIT: To maintain consistency of the border image on the left and right edges, ensure the source image includes those elements. For more information, refer to https://css-tricks.com/almanac/properties/b/border-image/

Answer №3

This method can also be utilized.

#border {
   width:200px;
   justify-content: center;
   align-items: center;
   display: flex;
   height:100px;
   border-top:1px dashed blue;
   border-bottom:1px dashed blue;
   background:yellow;
}
    
   <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Test</title>
    </head>
    <body>
    <div id="border">
    bordered area
    </div>
    </body>
    </html>

Answer №4

After realizing that creating an image for the border with CSS was taking up too much of my time, I decided to look for an alternative solution. I stumbled upon:

How to increase space between dotted border dots

I shared my solution in the discussion thread linked above. Even though it may not directly address the initial question, it effectively resolves the issue without the need for images, making it a more convenient option for me.

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

Creating padding for a Drawer component in Material-UI with React JS

I'm struggling to set a marginTop for my Drawer within the Drawer class component. Here's the code I've been working with: const theme = createMuiTheme({ root: { marginTop: '40px' }, }) class PageMenu extends React ...

cssreactjsmaterial-ui

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

htmlcsssvg

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart

How can I show the value from a text field in a column chart? I found the code for the chart on this website(). I tried using the code below, but nothing happens. Can someone please assist me? <script> window.onload = function () { ...

javascripthtmlcharts

What could be causing the span tag to not have CSS applied and the background image to not be displaying

The header I have created, shown in the image, is facing two issues. Firstly, I am unable to add ellipsis to the span tag even though I used it. I want the ellipsis to appear when the screen resolution is small. Secondly, the image uploaded is not displayi ...

jqueryhtmlcss

What steps should I take to resolve this animation issue?

My objective with this card animation is for the cards to expand in size when hovered over. Unfortunately, the current issue is that when one card is hovered over, all the other cards also expand, which is not the intended behavior. I am seeking a solution ...

htmlcssbootstrap-5

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...

javascriptcssreactjs

What's the best way to customize the dropdown icon in Bootstrap 5?

Is there a way to customize the default icon in the Bootstrap 5 dropdown menu and replace it with a Font Awesome character? I have gone through the documentation, but it didn't provide any helpful information. I also attempted to override the CSS styl ...

csstwitter-bootstrapfont-awesomebootstrap-5

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax

Sliding off the canvas - concealed navigation

I have implemented CSS to hide a menu on mobile: #filter-column { position:absolute; left:-400px; } However, I want the menu to slide in from the left when the user clicks a link, and everything else should be hidden. When the layer is closed, th ...

javascriptjqueryhtmlcss

Do class bindings with variables need to be inline when using Vue 3?

Consider the following HTML: <template v-for="(child, index) in group"> <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}"> <div>Container Content</div> </div> & ...

javascriptcssvue.jsvue-componentvuejs3

Tips for filling in the values for the options in a select dropdown menu

Currently, I am facing a strange bug related to the select element. Whenever I open the dropdown, there is always a mysterious black option at the top. This is how my HTML looks like: This particular element is part of my test controller. <select ng- ...

javascripthtmlangularjs

Check to see if the ContentEditable div is currently focused

I'm struggling to determine if a contenteditable div has focus with my current code. Here is what I have so far: if ($("#journal-content:focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } The issue I'm encounter ...

javascriptjquerycsshtmlcontenteditable

Showing local storage on a webpage using Jquery

I have encountered an issue where I can successfully add and remove items from local storage, but the added item does not display on my HTML page. The expected behavior is that when an item is added to local storage, it should be visible on a favorites pag ...

jqueryhtmllocal-storage

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Imagine this scenario: A page with three text fields, each with default values. There is also a hyperlink that performs a database lookup and returns parameters to the same page where the hyperlink was clicked. The goal is for the text boxes to be automa ...

javascripthtmlperl

What is the best way to change the date format of a JSON string to a custom format?

Hello, I am seeking advice on how to convert a JSON string date from a response into the format of "8/24/2016". I attempted to use a dateFilter.js file, but encountered errors. Here is my attempted code: Below is the dateFilter.js code that resulted in an ...

javascripthtmlangularjsjsonng-filter

Difficulties encountered when preserving the data of a website in HTML format

Usually, I request tweets on Twitter for a specific period and then scroll down the page to the last tweet. I save the HTML code of this page by right-clicking and selecting "Save As..." However, only the latest tweets are displayed in this HTML file. Is ...

htmltwitter

Interactive website information

Currently, my website features a jQuery UI navigation system and utilizes ajax to dynamically update content by swapping div ids from one html file to another. However, this method still involves multiple HTML files which can become cumbersome. I am curiou ...

phpjqueryhtmlcssajax

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...

javascriptpythonhtmlweb

Modify the click function from <tr> to <td> tag

I want to create an HTML page that functions as a digital library for books. Users should be able to click on a rate button to save the selected book to local storage, allowing them to see their rating whenever they revisit the page. However, I'm enc ...

javascriptjqueryhtml

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

javascripthtmlnode.jshtml-tablecheerio