How do I break the border around text in css?


Tags: css,border-layout,blockquote

Problem :

I am creating a blockquote for my website, it currently looks like this: blockquote

I would like to break the border around the opening quotation so it looks like this:

preferred style

Does anyone know how to do this? Here is the CSS I currently have, if that helps.

blockquote {
        display: block;
        float: left;
        background: #ffffff;
        width: 180px;
        padding-bottom: 0px;
        font-style: italic;
        font-family: Helvetica, MetaOT-bold, sans-serif;
        font-size: 18px;
        line-height: 1.5;
        margin: 30px 25px 10px 0px;
        border: 2px solid #5fa0d8;
        border-bottom: 0;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 20px;
        padding-bottom: 0;
        position: relative;
        quotes:"\201C" "\201D";  /*Unicode for Quoteation marks*/
}

blockquote p {
    line-height: 1.5;
    padding-bottom: 0px;

}

blockquote:before, blockquote:after {
    color: #5fa0d8;
    font-family: Georgia, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 100px;
    position: absolute;
}

blockquote::before {
    content: open-quote;
    left: 10px;
    top:-50px;
}

blockquote::after {
    content: close-quote;
    left: 160px;
    top:150px;
}

cite {
    display:block;
    background-color: #5fa0d8;
    width: 210px;
    float: left;
    color: #ffffff;
    font-size: 13px;
    font-style: normal;
    padding: 3px;
    padding-left: 10px;
    margin-left: -21px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-top: 23px;
    margin-bottom: 0px;
}


Solution :

I assume from your CSS, your HTML should be like that:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
    <cite>Cite box</cite>
</blockquote>

I've made a JSFiddle to render your blockquote. I have also changed the way you use the size because it was not possible to add more or less text. BTW I assume you're using a white background like in your example.


    CSS Howto..

    How should I override hover style of a div in an anchor tag?

    Div style in css, how to start under then button

    How can I get my rows 100% wide?

    How can I use themeroller'ed styles in “regular” parts of a page?

    How to Access local CSS file from within Alfresco Javascript?

    How to set the background image width using CSS?

    How do i move this block?

    How to style this with css? [closed]

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to make this div using html and css?

    How to display the bottom of an image?

    How do i apply fadein and fadeout effect for this?

    CSS How to make text to scale like an image

    How to edit css margin-top for a text in mobile version

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    How to align image as pseudo element?

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    How to cancel HTML “onfocus” behavior?

    How to stop some css from getting applied to all
  • tag
  • How to use CSS Loader in my website?

    How to replace default html checkbox with just html+css and no images?

    bootstrap modal disappear immediately after showing

    CSS How to make div 100% despite 80% div

    How to make list items of one UL with fixed height be displayed as columns?

    How to stop css animation in current position on hover?

    How to use Effeckt.css?

    How to remove all elements except for one, maintaing the same CSS path to it?

    How to make images go inline vs break to a new line?

    Css how to create navigation bar

    How to make a vertical bar that follows its user in a specific area?