Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="outer">
  <div class="inner">
    <div class="content">
      <h1>Star Trek-like interface border (CSS)</h1>
      <p>
        Curabitur accumsan viverra ipsum, et imperdiet mauris condimentum ac. Morbi dolor lorem, pharetra placerat congue eget, dictum ac augue. Proin dapibus nibh metus, non gravida arcu bibendum nec. Aliquam non sapien sapien. Vivamus in sapien a arcu lacinia efficitur. Etiam suscipit, magna eget feugiat interdum, orci massa malesuada neque, vitae malesuada odio felis malesuada leo. Donec eget efficitur quam.
      </p>
      <p>
        Maecenas dapibus, libero a accumsan efficitur, odio felis tempus eros, sed mattis eros felis vel urna. Pellentesque eu mi nulla. Praesent cursus vitae augue in consectetur. In eleifend placerat massa, nec consequat lectus facilisis et. Etiam at urna sem. Proin vulputate enim in nisi ornare, sit amet lacinia purus sodales. Phasellus rutrum quam eget sagittis ultricies. Praesent et molestie arcu. Praesent at arcu eget enim venenatis semper. Proin sodales fringilla arcu, efficitur congue ipsum auctor quis. Phasellus eget mi id elit accumsan ullamcorper malesuada vel mauris.
      </p>
      <p>
        Sed vitae ipsum quis purus hendrerit posuere. Aenean quis tortor sed dui consequat consectetur sit amet eget risus. Cras ac lacinia enim, vel aliquam dui. Proin in leo leo. Fusce in sodales lacus. Donec dapibus urna sed sem mollis semper. Nulla quis mollis felis, non mollis orci. Fusce aliquet lacus diam, et egestas arcu finibus ac. Proin sollicitudin purus id consectetur rhoncus. Duis nec augue sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur sem quis varius vestibulum.
      </p>
      <p>
        Vestibulum dapibus vulputate nunc, vel ornare dolor iaculis vel. Sed molestie sapien massa, vitae tempus nisi iaculis ut. Nunc placerat vestibulum lacus, in ultrices felis efficitur quis. Duis a nisl in erat molestie placerat at ac erat. Duis vulputate neque elit, ut vestibulum tellus ornare ut. Ut nisl nisl, finibus in est ut, tempor ullamcorper lorem. Aenean nec est non magna cursus efficitur. Quisque varius neque ut sapien malesuada, in facilisis nisl consequat. Quisque pharetra cursus turpis, vitae maximus nisi. In tempor interdum sapien, eget accumsan ipsum tempor at. Nunc volutpat ac nunc id mattis. Sed ac lectus id sem tempor maximus.
      </p>
      <p>
        Nam ut viverra mauris. Phasellus egestas tristique semper. Donec sed augue bibendum, vestibulum ipsum in, efficitur nisi. Cras non enim non justo congue mollis laoreet commodo nisi. Aliquam ultrices eros quis placerat venenatis. Donec sed neque non augue aliquet lobortis. Vivamus in justo risus. Integer vel ligula eget purus mollis iaculis. Morbi vestibulum malesuada sem eu maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio dolor, ullamcorper et odio vitae, varius ullamcorper ante. Vivamus lacinia dui auctor odio elementum, id scelerisque tortor tempor. Donec sed ipsum at lacus tempor elementum in ut odio. Fusce velit felis, interdum vitae pulvinar ac, interdum ac quam. Praesent quam nibh, molestie non sodales in, pulvinar eu elit. Donec at tortor quis ligula porttitor luctus vel id dolor.
      </p>
      <p>
        Praesent sed tortor malesuada, suscipit mi at, lobortis metus. Vestibulum eget lorem gravida, feugiat diam vitae, blandit mauris. Ut rutrum mauris viverra pretium rutrum. Mauris et enim elit. Nulla id dui ultrices, laoreet lacus nec, lobortis magna. Mauris sit amet orci porta dolor vestibulum semper vel et velit. Integer in pretium ipsum.
      </p>
      <p>
        Integer sit amet risus sit amet justo fringilla suscipit. Aliquam ut ultricies augue. Nullam ut pretium nisi, ac elementum neque. Praesent pharetra mi sapien, vitae finibus libero pretium iaculis. Cras dui ipsum, molestie ac ullamcorper et, pulvinar blandit ligula. Proin in sagittis mi, vitae dictum lectus. Nam vulputate egestas sapien non fringilla. Vivamus vel neque nibh. Aliquam erat volutpat.
      </p>
      <p>
        In mattis molestie iaculis. Curabitur venenatis augue eget rutrum bibendum. Morbi non consequat nisl, quis luctus ipsum. Cras eget dolor ut tellus pretium ultricies. Nam finibus a sapien sit amet vulputate. Curabitur euismod ac nisl a efficitur. Donec dictum nulla sit amet ex rhoncus maximus. Quisque ac suscipit ipsum, non consectetur velit. Fusce suscipit tincidunt dolor. Curabitur vel metus felis. Mauris varius velit in nisi fringilla dignissim. Ut non ultricies nisi, a sagittis mi. Vivamus dapibus a urna et imperdiet. Vivamus rhoncus a sem in tempus. Duis tortor mi, cursus at faucibus nec, aliquam eu urna.
      </p>
      <p>
        Proin vel tempus est. In hac habitasse platea dictumst. Donec enim arcu, blandit quis aliquam eu, pellentesque sed arcu. Morbi pretium purus augue, eget sollicitudin leo efficitur ac. Curabitur sed elit ut sem pellentesque dictum nec nec massa. Maecenas pellentesque orci vel elit ornare interdum. Vivamus ipsum enim, pharetra nec sodales eget, cursus vitae tellus. Nullam malesuada justo eget mi venenatis imperdiet. Nulla eu mattis elit, nec varius sapien. Sed at vulputate elit. Integer finibus, magna in interdum pulvinar, lectus augue ultricies ligula, at porttitor sem risus eget nulla. Donec tincidunt dapibus mi, quis varius neque.
      </p>
      <p>
        Nulla lorem nulla, tincidunt sed dolor ac, dapibus sagittis felis. Nulla varius euismod nisi vitae faucibus. Phasellus fermentum, arcu et iaculis viverra, dolor metus viverra lectus, ac congue magna justo quis mi. Donec et purus vitae mi malesuada fringilla. Cras sagittis lorem id diam dictum tempus. In ultricies urna quis turpis interdum porttitor. Fusce ut maximus lorem. Morbi eget ipsum mauris. Quisque tincidunt sem augue, quis blandit enim elementum non. Suspendisse non nunc nunc. Vestibulum pharetra diam vel facilisis accumsan. Aliquam ut est ligula. Nullam elementum elit in dictum consectetur.
      </p>
      <p>
        Fusce ut lacinia libero. Suspendisse sollicitudin nec elit quis sollicitudin. Nunc elementum eros sed odio hendrerit luctus. Duis sed lorem ut lectus aliquet sodales quis ac turpis. Fusce mi augue, efficitur eu diam nec, efficitur pellentesque enim. Proin rutrum sollicitudin porttitor. Quisque pretium dui vel lacinia consectetur. Nam consequat quam non urna efficitur sollicitudin.
      </p>
      <p>
        Donec sollicitudin ante sit amet luctus blandit. Nunc ultricies eros sed sem malesuada accumsan. Integer porttitor felis sed dictum efficitur. Maecenas porta eu nisi ut laoreet. Mauris iaculis augue in pulvinar laoreet. Curabitur ultrices imperdiet consectetur. Nullam placerat eleifend lorem, imperdiet suscipit lorem vehicula pellentesque. Integer laoreet pretium augue, et eleifend erat accumsan rutrum. Integer id magna sit amet sem commodo aliquet. Nunc sollicitudin in mi eu ultrices. Mauris eu orci et leo hendrerit elementum. Duis eget ante nunc. Ut et euismod nisl.
      </p>
      <p>
        Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus vel ornare lacus. Integer volutpat nibh sed mi commodo aliquet. Integer faucibus viverra mi, id semper velit gravida vel. Duis dolor velit, lobortis imperdiet dui sollicitudin, porta consectetur mi. Praesent sed imperdiet massa, at placerat felis. Pellentesque neque purus, elementum vestibulum justo eget, porttitor condimentum nulla. Donec condimentum orci turpis. Suspendisse elementum erat purus, id consequat arcu faucibus consectetur. In eget imperdiet felis. In enim quam, feugiat quis augue sed, vehicula scelerisque magna. Fusce porta viverra dolor vel tempus. Curabitur luctus nibh lacus, nec facilisis nisi venenatis vel. Nam ac pellentesque velit. Pellentesque lacus mi, consectetur sit amet nibh sit amet, egestas efficitur sem.
      </p>
      <p>
        Aenean semper dui ac tortor faucibus, nec rhoncus nibh pulvinar. Duis ac sodales ligula, a malesuada libero. Phasellus quis metus scelerisque, lacinia tortor vitae, scelerisque metus. Mauris hendrerit volutpat nibh, non suscipit ipsum. Pellentesque porta auctor augue ac rutrum. Nulla ac lorem faucibus, finibus orci et, elementum nisi. Integer eu diam a felis posuere iaculis et eu nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque posuere cursus placerat. Etiam ac consectetur augue, vitae pretium ipsum. Integer ac euismod lectus. Suspendisse condimentum ac tellus sit amet viverra.
      </p>
      <p>
        Curabitur lobortis turpis id mi egestas tincidunt vitae convallis enim. Maecenas nec pretium mauris. Nunc justo lectus, hendrerit eget nulla eget, congue accumsan purus. Phasellus urna ex, pellentesque fermentum euismod sed, pretium sit amet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac nisi sed dui porttitor luctus sed at nisl. Nullam tincidunt vestibulum nisl, sed molestie mi. Suspendisse potenti.
      </p>
      <p>
        Donec id lacus purus. In eu tellus eget justo congue consectetur in non urna. Morbi feugiat fringilla quam a sollicitudin. Praesent pulvinar turpis quam, eget porttitor mi vestibulum non. Morbi suscipit viverra accumsan. Proin vulputate, felis sed maximus convallis, arcu nisl mattis mauris, ac pellentesque mi felis non nulla. Duis laoreet tellus lacus. Quisque nibh risus, sollicitudin ultrices diam vitae, placerat suscipit lacus. Vivamus euismod accumsan vulputate. Vestibulum blandit interdum porttitor. Sed auctor nibh cursus, tristique sapien ut, mattis velit. Donec in nunc ligula.
      </p>
      <p>
        Donec nec magna magna. Ut varius ipsum euismod, semper massa vel, sollicitudin lectus. In eu luctus quam, in eleifend diam. Duis egestas blandit justo a commodo. Nam eu cursus nunc. Mauris ut mi nec ante interdum pharetra. Curabitur aliquet in diam vitae posuere. Pellentesque nec neque at risus interdum elementum. Donec mi ante, fringilla vel urna ut, commodo venenatis diam. Nunc ut dui egestas, laoreet orci sit amet, posuere enim. Ut faucibus ante sed ultrices congue. Mauris velit lorem, imperdiet eget eros vitae, ultricies accumsan metus. Nullam posuere fringilla sem, ac placerat augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget mi nibh.
      </p>
      <p>
        Cras sollicitudin sagittis urna sed ultricies. Aenean maximus ultrices fringilla. Curabitur finibus volutpat iaculis. Integer blandit neque at risus aliquam, ut accumsan ipsum fringilla. Mauris scelerisque metus at semper pharetra. Sed accumsan ac ex vel finibus. Proin vulputate a est at convallis. Nullam ac elit et diam commodo rutrum ac vel lorem. Fusce gravida dignissim ligula eget consequat. Sed sit amet posuere risus. Morbi dictum nulla ligula. Vestibulum placerat, sem quis dignissim iaculis, diam ligula aliquam mauris, quis scelerisque dui nunc eu lectus. Nam laoreet, orci vel accumsan varius, enim nibh porttitor massa, quis viverra massa lectus ut mauris. Duis nec dui pellentesque tortor auctor luctus sit amet ut ligula. Maecenas leo urna, tristique a semper et, iaculis eu ipsum. Pellentesque lacus urna, scelerisque ut justo id, fringilla semper dolor.
      </p>
      <p>
        Aenean vulputate, ante feugiat accumsan venenatis, orci erat congue ipsum, nec tempus neque sem vitae nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mollis metus at hendrerit fringilla. Duis eu eros scelerisque orci fringilla fringilla et a nunc. Nulla facilisi. Etiam consectetur hendrerit quam, a rhoncus sapien porttitor tincidunt. Morbi in ipsum ornare, convallis sapien eu, posuere nisi. Nulla sagittis purus at leo ornare bibendum. Suspendisse tempus tincidunt dui at cursus. Nulla eu quam libero. Maecenas eu maximus eros. Quisque porta ac purus eget dictum. Sed pulvinar convallis tortor a tristique. Morbi nec sodales tortor, id maximus dolor. Aliquam porttitor rutrum massa, gravida pretium magna gravida at. Donec sit amet nisl non risus fermentum tristique at in lectus.
      </p>
      <p>
        Ut vulputate nunc id tellus feugiat, a lacinia nibh suscipit. Aenean porta justo sem, vel consectetur dui bibendum malesuada. Suspendisse malesuada lobortis eros, ac egestas urna dictum quis. Quisque orci risus, auctor ut congue at, rutrum vel ex. Suspendisse eu est tellus. In euismod sagittis mi, vitae tincidunt neque placerat sit amet. Mauris ornare ac justo eget efficitur. Proin eu odio nec sapien imperdiet convallis. Fusce iaculis dui eu erat tempor vestibulum. In magna est, faucibus ac nisi sed, placerat malesuada justo. Praesent volutpat tellus et dictum accumsan. In rutrum ipsum a ultricies euismod. In tristique urna at eros commodo sollicitudin.
      </p>
      <p>
        Integer id sagittis sapien, vitae condimentum dui. Cras ut iaculis ex, eu rutrum ante. Pellentesque ultrices sem et feugiat auctor. Curabitur ultricies enim et metus pellentesque aliquam. Nunc imperdiet ac dui a sodales. Vestibulum aliquet neque eu ex faucibus lobortis. Cras diam est, fringilla pulvinar accumsan vel, lacinia quis dolor. Aliquam vulputate sem quis ipsum viverra pharetra. Mauris faucibus nisi nisl, at lacinia sapien bibendum vel. Sed tortor ante, blandit non ullamcorper eget, vehicula ac nulla. Aenean congue dui et accumsan congue. Morbi hendrerit ac erat quis dignissim.
      </p>
      <p>
        Aenean luctus nisl tempor, aliquam dui id, euismod dui. Nam interdum nibh magna, vel suscipit urna accumsan in. Etiam mattis, dui nec ultrices rutrum, est leo euismod odio, id fringilla est magna ac tellus. Donec nec elementum nulla. Maecenas laoreet lectus sed mauris blandit, nec porttitor ante egestas. Nullam a aliquet metus, eget sodales turpis. Aenean at finibus est, ac tincidunt erat. Sed sit amet enim nec nibh tempor tristique vel in nunc. Aenean ac lorem quam. Cras ante enim, fringilla non tempor vitae, mattis imperdiet ligula. Duis nunc erat, viverra eget iaculis at, hendrerit sit amet lectus. Morbi pulvinar malesuada nisi, ut vehicula urna consectetur non. Aenean semper dui mi, eget volutpat dolor tempor eget. Nulla id tempus est. Quisque nunc nulla, suscipit eget nulla in, tempus sollicitudin dolor. Sed accumsan diam nec maximus mollis.
      </p>
      <p>
        Mauris eu sapien tortor. Donec suscipit mi nulla, id aliquet turpis pellentesque eu. Sed sed nunc ante. Nulla eu leo sed arcu dictum vehicula. Nunc volutpat erat eu eros congue, id euismod metus bibendum. Vivamus posuere et est venenatis bibendum. Aenean consequat lorem ut felis aliquet ornare. Vivamus massa massa, fringilla eget elit suscipit, facilisis gravida nisi. Nam maximus leo eget tellus bibendum, sed imperdiet diam blandit. Nullam bibendum justo mauris, et bibendum nisl mollis a. Curabitur ornare justo nunc, convallis cursus lectus fermentum fermentum. Donec vitae dolor vitae justo interdum laoreet. In at nunc quis purus auctor dignissim sed vel dui. Donec varius accumsan cursus.
      </p>
      <p>
        Vivamus sagittis sodales sapien, non dapibus ipsum convallis in. Proin auctor euismod odio ut lobortis. Mauris scelerisque interdum risus id consectetur. Aenean gravida feugiat enim. Mauris sodales, ipsum eu lacinia varius, tellus nibh consectetur ante, in vulputate odio leo quis ante. Suspendisse dapibus turpis vel diam facilisis, rutrum sodales lacus pellentesque. Morbi id nunc pharetra, iaculis eros sed, consectetur erat. Fusce eget venenatis orci. In aliquet arcu et nulla imperdiet semper. Suspendisse tempor eros nisi, vel ornare nunc vulputate vitae. Curabitur molestie tortor vehicula purus finibus, et posuere velit ullamcorper. Sed at mauris feugiat, egestas lacus ut, pulvinar lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vitae consequat dui.
      </p>
      <p>
        Sed vitae consectetur enim. Nulla imperdiet dolor sed risus sodales, at lacinia velit vulputate. Donec mollis nulla eget massa commodo, et condimentum ex varius. Proin varius vulputate augue id sodales. Curabitur bibendum, sapien id tincidunt euismod, ex ante dignissim sapien, at interdum quam nisi vel nibh. Praesent justo leo, fermentum ac gravida vitae, efficitur quis neque. Cras sapien risus, interdum et tortor quis, ultrices volutpat erat. Cras mattis, neque at vestibulum lacinia, dui leo pharetra neque, ut tempor tellus lectus vitae nisl. Donec sodales porta vehicula. Curabitur bibendum elit eu sapien aliquam auctor. Donec turpis nunc, aliquam id placerat sed, vestibulum eget felis. Phasellus at vulputate nulla. Praesent tristique maximus maximus. Pellentesque imperdiet massa vestibulum enim feugiat, at tristique turpis malesuada. Pellentesque ut pretium felis. Quisque leo mauris, bibendum ac magna ut, tempor condimentum leo.
      </p>
      <p>
        Fusce eleifend, neque sit amet commodo tincidunt, ipsum magna ultrices lorem, et lobortis sem nibh eu lacus. Phasellus id diam placerat, tristique metus non, pharetra eros. Maecenas egestas sem a mauris vestibulum, eu ornare erat porttitor. Fusce vel scelerisque sapien, ac rhoncus lacus. Donec fermentum ex id pulvinar fringilla. Aenean eu ex et felis pulvinar faucibus. Phasellus ligula ipsum, volutpat vel elit nec, euismod molestie urna. Proin finibus elit eros, in pellentesque nibh cursus finibus.
      </p>
      <p>
        Curabitur et ipsum et dui pretium rutrum. Quisque ut condimentum urna. Fusce sed erat gravida, tincidunt dui sit amet, laoreet tellus. Quisque interdum sollicitudin mi, sit amet vulputate sem sollicitudin vel. In hac habitasse platea dictumst. Donec ullamcorper accumsan augue, nec gravida est consequat at. Aenean non elementum magna, eu facilisis massa. Nunc porta, ante vitae sollicitudin cursus, lacus nulla euismod lectus, eu commodo ante nulla quis lorem. Curabitur ipsum tortor, interdum vel magna ac, feugiat mattis enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id iaculis mi.
      </p>
      <p>
        Phasellus gravida aliquet ultrices. Mauris sed magna orci. Vestibulum tincidunt at risus non dignissim. Donec luctus eu tortor id luctus. Duis varius et eros eget dapibus. Fusce ut eleifend orci. Nunc nec cursus ante, sit amet ultricies sem. Cras cursus, elit ut bibendum molestie, ipsum massa maximus quam, at ullamcorper dolor odio id ligula. Integer urna metus, porta non orci quis, ultrices varius justo. Suspendisse commodo vel elit sit amet imperdiet. Cras a neque lorem.
      </p>
      <p>
        Sed mi libero, congue eu tincidunt sit amet, fermentum vel ipsum. Ut tellus diam, imperdiet eu imperdiet a, dignissim at arcu. Aenean lacinia semper tincidunt. Phasellus fringilla dui libero, lacinia dictum tellus facilisis nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce quis lacus vulputate, bibendum quam euismod, rutrum arcu. Donec mollis lorem vel tellus elementum consectetur. Quisque a ante tempus, suscipit nisi sit amet, luctus odio. Phasellus aliquet lectus tortor, tincidunt porttitor dolor rhoncus et. Nam tempor odio ac diam condimentum rhoncus. Aenean neque leo, sodales quis massa vel, ultrices sodales nisi.
      </p>
      <p>
        Etiam efficitur, neque eget fermentum viverra, dolor sapien convallis eros, et dictum eros tellus ac lorem. Cras finibus nunc libero. Donec ultrices ex faucibus tincidunt tempor. Donec sit amet risus elementum, eleifend massa eu, imperdiet ante. Sed sit amet vulputate felis. Mauris leo nibh, dapibus vitae cursus a, dapibus id enim. Pellentesque pharetra ullamcorper bibendum. Mauris vitae nisi in ante pulvinar fringilla in nec nibh. Praesent blandit urna vitae ex interdum, et convallis velit dapibus. Aenean justo eros, pulvinar ac laoreet non, accumsan vitae sapien. Cras nec mauris ac neque feugiat iaculis eu euismod magna. Quisque nulla nunc, efficitur a malesuada eget, tincidunt eu tortor. Morbi sit amet lorem at purus sodales tempus quis non nunc. Nunc euismod ex augue, id consequat leo pretium sed. Nam vestibulum, lacus a rhoncus dignissim, tortor sapien molestie ex, vel rutrum ex urna a lectus. Nam varius lorem eget risus egestas scelerisque.
      </p>
      <p>
        Morbi feugiat nibh eros, sit amet fermentum urna ornare a. Pellentesque sit amet placerat dui. Quisque aliquet eros ut magna tempor ullamcorper. Ut bibendum diam vitae justo consequat suscipit. Fusce malesuada luctus urna. Nunc vulputate, lectus scelerisque fermentum finibus, mauris ante fermentum ante, eget tincidunt nisl est vel orci. Nam tempor finibus dapibus. Cras ornare, ligula ut gravida consequat, odio nisi auctor nulla, in convallis tellus lacus et est. Donec rhoncus fringilla vestibulum. Sed tempus, ex eu fringilla vehicula, metus erat imperdiet nisi, sed ultricies leo metus quis neque. Donec id elementum turpis. Curabitur pulvinar dapibus enim, quis feugiat nunc lacinia id. Praesent ultrices augue eu diam vulputate, ac tincidunt ex dapibus.
      </p>
      <p>
        Aliquam sed velit sed augue venenatis porttitor et vel neque. Phasellus vel mi in magna finibus congue ac a dui. Nunc placerat libero vitae velit lacinia, a finibus magna cursus. Donec pharetra aliquam dolor, eget cursus est feugiat eu. Quisque quis dolor ipsum. Cras maximus sodales tellus, vitae feugiat nulla semper quis. Fusce velit quam, vulputate a erat at, venenatis elementum arcu. Duis eget diam felis. Phasellus aliquam, sapien et malesuada pellentesque, augue leo molestie diam, id posuere lectus purus sollicitudin augue. Integer mollis, lacus sit amet pulvinar scelerisque, lorem eros imperdiet metus, in feugiat diam enim sit amet ligula.
      </p>
      <p>
        Morbi scelerisque quam neque, a sollicitudin felis condimentum et. Nulla nibh est, feugiat eu hendrerit sed, eleifend at justo. Donec leo eros, scelerisque in lectus ut, tincidunt facilisis sapien. Pellentesque mattis eget massa vel consectetur. Nulla convallis velit eget venenatis aliquam. Sed interdum rhoncus maximus. Cras euismod viverra odio a viverra. Maecenas id mauris enim. Suspendisse potenti.
      </p>
      <p>
        Phasellus feugiat varius arcu, eu aliquam ipsum pellentesque ac. Morbi nec eros eget mi blandit pellentesque auctor eu ipsum. Fusce dignissim mattis nisi vel pretium. Suspendisse congue purus neque. Duis varius tellus massa, in consectetur enim placerat vel. Etiam ultrices, metus rutrum sagittis efficitur, odio diam ultrices turpis, sit amet vulputate risus neque sit amet nulla. Suspendisse id ligula vitae risus pulvinar convallis. Phasellus id convallis diam. Nunc placerat et erat ut tincidunt.
      </p>
      <p>
        Proin nibh eros, gravida a ornare ut, ultricies et erat. Cras maximus lectus ac leo tincidunt efficitur. Phasellus ullamcorper dignissim commodo. In rutrum vel magna at mattis. Etiam tincidunt felis quis neque vehicula, at lacinia ipsum faucibus. Proin augue purus, maximus eu elit ac, commodo maximus ante. Nam nec odio sed lacus pretium tincidunt vitae ac mi. Nulla sagittis massa et dolor semper sollicitudin posuere. 
      </p>
    </div>
  </div>
</div>

              
            
!

CSS

              
                body {
  margin: 10px 0 0 10px;
}
.outer {
  min-height: 100px;
  overflow: visible;
  border-style: solid;
  border-width: 30px 0px 0px 100px;
  border-color: #800080;
  border-radius: 100px 0px 0px;
}
.inner {
  box-sizing: border-box;
  min-height: 120px;
  overflow: visible;
  padding: 40px 0 0 50px;
  border-style: solid;
  border-width: 30px 0px 0px 50px;
  border-color: #800080;
  border-radius: 100px 0px 0px;
  margin-top: -20px;
  margin-left: -50px;
}
.content {
  height: calc(100vh - 90px);
  overflow: auto;
}

              
            
!

JS

              
                
              
            
!
999px

Console