CODEWITHSUNDEEP
csshtmlborder
Wesley Cheung
Wesley Cheung

Reputation: 71

CSS div border radius around image

i hope someone can answer this question because my client wants this and right now i dont know how to build this in css.

Does anyone know how to build something like this ? It should be something like if you align your image to the right your text will align nicely with the image.

Here what i want to do is to build a div make a border around all the text that has been typed and then align it with the image. how could i do this?

After the help of Pete.

Problem here is the 

box-shadow

Also the box needs to be transparant later in the stage. This is my result right now http://jsfiddle.net/peteng/cu59r/.

Edit : Thank you for all the answers and support to help me solve this css issue.

The following thing it should happen is :

  1. See the picture.
  2. See the jsfiddle link i posted.
  3. The content with the border needs a box-shadow, a border radius and a gradient.
  4. This needs to be dynamic.

And again thank you community for helping me means alot to me.

Upvotes: 2

Views: 1360

Answers (7)

David Thomas
David Thomas

Reputation: 253318

A further alternative to those suggested, given the following HTML structure:

<div class="imgContainer">
    <img src="http://placekitten.com/150/150" />
    <p><!-- text excised for brevity --></p>
</div>

And CSS:

.imgContainer {
    border: 1px solid #000;
    padding: 0;
    width: 80%;
    margin: 0 auto 1em auto;
    border-radius: 1em;
}

.imgContainer img {
    float: right;
    margin: -1px -1px 0 0;
    padding: 0 0 0.5em 0.5em;
    border: 1px solid #fff;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

.imgContainer p {
    margin: 0.5em;
    padding: 0;
    text-indent: 0.5em;
}

JS Fiddle demo.

This should allow any size image to be used (so long as it fits within the container element, of course), and be responsive, and adaptable to changed sizes.

Unfortunately, though, I can't think of a way to provide the curve on the borders of the img itself. On the plus-side, it avoids needlessly wrapping and re-wrapping elements, so the HTML itself could, and should, stay pretty lean.

Upvotes: 0

Pete
Pete

Reputation: 58432

with the use of a couple of images you should be able to create what you want

html

<div id="wrapper">
    <div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div>
    <!--put text here-->
    <p>Text</p>
</div>

css

#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;}
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;}
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;}

Example

Update

With all your edits as to what you now want (instead of the simple l-shape in your original question). This is not possible for the following reason

The text has to have a background colour which means that you need the background colour on the main wrapper so that it will make the l-shape. This means the only way to get the desired effect of the rounded corners for the image is to place another background over the wrapper background (meaning you cannot have anything transparent otherwise the wrapper background-color will just show through)

The best you can hope for is to tell the client, if they want that shape, they will have to keep the images to an exact size and their text to a specific length and then you can use a simple background image

Upvotes: 3

Stocki
Stocki

Reputation: 473

Skull3r7 had a good idea with background-images. In addition, it is possible to use two divs with (dynamic) text and one other with the 'top border'.

  • Layer one contains the text as 'placeholder' and 'bottom border',
  • Layer two contains the 'top border image' (covers the top of Layer one)
  • Layer three contains the visible text.

Example

However, it is easier to implement Pete's solution, but I hope this example can help too. :)

Upvotes: 0

skip405
skip405

Reputation: 6279

This is a very good question in my opinion :)

My short answer would be - yes, it's possible - see Pete's answer. I understand the difficulty of the situation and also I understand the fact that this kind of solution lacks flexibility because it combines css border-radius and an image - so => a) it will look weird in IE8 and below and b) it will look weird if we change some css :)

My own answer would be to use css only to do that, but the main issue will be unsolved, the corners close to the image will not be rounded by any means in css that I'm aware of.

Consider looking at this fiddle - http://jsfiddle.net/skip405/m6cpb/1/

I would prefer my variant because it's a bit more flexible - if there is a need of change - only css will change, no need of re-making any images of another color or of a different radius... no images needed at all :) Although you will need to style the images floated to the left differently and those - in the middle of the text as well.

Upvotes: 0

Aravind30790
Aravind30790

Reputation: 992

see this DEMO . Is this what you are expecting. 

<figure style="float:right;">

Upvotes: 0

Harry Knowles
Harry Knowles

Reputation: 3

You can simply float the image and it will look like this: http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif

Just add

float: right/left;
margin: 0;

See if that works.

Upvotes: 0

skull3r7
skull3r7

Reputation: 215

I think there isn't a easy way to style your text-box like this.

My suggestion: designs the box with Photoshop and then add it as a background image in two different divs (the text box should have a transparent background where the image should be). After this you position the divs in the right way, if necessary with a wrapper div.

disadvantages: not responsive, static, and so on

Upvotes: 1

Related Questions