Re: Border align

Right. Sounds a lot like the way border-image works. Have you checked out the links we've sent? Border-image can do this sort of thing with an image-based border, but does not pull the padding along with it, nor crop the element, nor change the impact of the element dimensions on the page geometry at all (you haven't said if that is important or not). 

If you have a fixed width/height element, then 'box-sizing:border-box' will put the border inside that width instead of outside (like in IE quirks mode), but does not change where the border begins, and does not change the outer width of the border-box when you have 'width:auto' (a little negative margin can help you there though). 

You can also get centered borders with 'display:table-cell' if the 'display:table' ancestor has 'border-collapse:collapse'. 


Brad Kemper

On Jul 13, 2010, at 9:50 AM, Colt Antonio Pini <Colt.Pini@nau.edu> wrote:

> Attached are images of what I am describing. The red border just emphasizes the edge of the container in relation to the border, the blue is the actual border. 
> 
> Colt
> 
> If you don't get the attachments the images are here:
> http://coltpini.com/jpg/inset.jpg
> http://coltpini.com/jpg/centered.jpg
> http://coltpini.com/jpg/outset.jpg
> http://coltpini.com/jpg/offset1.jpg
> http://coltpini.com/jpg/offset2.jpg
> 
> 
> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Christoph Päper
> Sent: Monday, July 12, 2010 11:57 PM
> To: www-style list
> Subject: Re: Border align
> 
> Colt Antonio Pini:
>> 
>> img {border: 1px solid #0f0;}
>> 
>> The inset border would "clip off" 2 px of my image, an outset would be added to the outside of the image, and center would clip 1px and add 1px to the outside.
> 
> You might be interested in the 'box-sizing' property, although it does not do exactly what you describe. <http://www.w3.org/TR/css3-ui/#box-sizing>
> 
> 
> <inset.jpg>
> <centered.jpg>
> <outset.jpg>
> <offset1.jpg>
> <offset2.jpg>

Received on Tuesday, 13 July 2010 17:25:22 UTC