Member Avatar for tqmd1

Dear Experts

I have following codes

<html>

<style type="text/css">

#box1	{
	width:400px;
	height:400px;
	background:e3eeff;
	color:blue;
	padding:10px;
	text-align:center;
	margin-top:100px;
	margin-left:300px;
	vertical-align:middle; 
	{
</style>

<body>
<div id="box1"><h1>Div <br>with<br> four<br> border<br> images</h1></div>
</body>
</html>

I want to apply attached images as border.

For example bg_left.gif will be display on left border of div.

Please help

bg_bottom.GIF 2.37 KB bg_left.gif 2.37 KB bg_right.gif 2.37 KB bg_top.GIF 2.37 KB
  • 2 Contributors
  • 3 Replies
  • 94 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

The original markup from has a couple of simple syntax problems (missing the # on the hex color and a stray curly brace) that should be fixed before attempting layout changes. 's nested-div idea is valid and quick to implement, but there are cleaner or more robust options depending on the assets available and required browser support.

A modern, compact solution is CSS border-image when the border is supplied as a single sliceable graphic (a 9-slice or strip). Example:

.box {
  border: 20px solid transparent;
  border-image: url(border-slice.png) 20 fill stretch;
}

This keeps markup simple and scales the edges and corners automatically. See MDN: border-image for details and values.

If separate images are provided for left/right/top/bottom or for corners, use CSS pseudo-elements or multiple backgrounds so extra markup is not required. Example using pseudo-elements (left and right edges):

.box { position: relative; padding: 20px; }
.box::before,
.box::after { content: ""; position: absolute; top: 0; height: 100%; width: 20px; background-repeat: repeat-y; }
.box::before { left: 0; background-image: url(bg_left.gif); }
.box::after  { right: 0; background-image: url(bg_right.gif); }

Troubleshooting and practical tips: ensure correct image paths and background-repeat (use repeat-x/repeat-y for edges); use PNGs with alpha for transparent corners; combine assets into sprites or a single slice for fewer requests; provide a simple fallback (solid border or nested wrappers) for very old browsers. For reference on multiple backgrounds and pseudo-elements, consult MDN: background-image and MDN: ::before / ::after.

Recommended Answers

All 3 Replies

Member Avatar for Dandello

That's one nested div for each one of your border graphics set as a background image with the background color set to transparent.

<div id="inner_top" style="background:transparent url(bk_top.gif) top left no-repeat">
Member Avatar for tqmd1

Dear Sir,
Could you please provide some more details?

Member Avatar for Dandello

Each graphic is set in its own div with background-color set to transparent. Each div can be made to fit the graphic and independently positioned or simply nested, one on top of the other, with identical sizes.

Edited by Dandello because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.